Simpele pop-up

P307 / V307-00

Met deze view kun je een automatisch marketing pop-up toevoegen. Hier kun je een tekst, formulier en afbeelding in kwijt. De pop-up zal alleen getoond worden als er ook elementen aan de lijst zijn toegevoegd. Dus wil je het na de actie uit zetten kun je gewoon de lijst leeg halen.

Als alleen een afbeelding toegevoegd is en niks anders dan zal de witruimte van de pop-up automatisch verdwijnen. Verder kan de afbeelding ook een link krijgen.

Standaard staat de pop-up ingesteld dat deze iedere 5 dagen getoont wordt. Dit is in het script configureerbaar.

Voorvertoning

Alvast beginnen met een basis opmaak?

PHP
Kopiëren<!-- Vergeet niet overal waar "FIXME:" staat aan te passen naar een unieke naam op de website. -->
<div id="FIXME:">
	<div class="modal-backdrop"></div>

	<div class="modal modal-popup" tabindex="-1" role="dialog" aria-label="Pop-up modal" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered" role="document">
			<div class="modal-content">
				<div class="modal-header-overlay">
					<button type="button" class="close" data-dismiss="modal" aria-label="Sluiten">
						<?= NCCMS::getView('cms/icon', 'times') ?>
					</button>
				</div>

				<div class="modal-body">
					<nc-preset-list name="FIXME:" page="1">
						<template nc-preset-key="image" nc-preset-title="Afbeelding">
							<nc-image name="{%name%}-image" page="{%page%}" allow-link="true" width="960" ratio="1"></nc-image>
						</template>

						<template nc-preset-key="text" nc-preset-title="Tekst">
							<nc-text name="{%name%}-text" page="{%page%}"></nc-text>
						</template>

						<template nc-preset-key="form" nc-preset-title="Formulier" nc-preset-access="form">
							<nc-form name="{%name%}-form" page="{%page%}"></nc-form>
						</template>
					</nc-preset-list>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Geef ook een knop weer zodat de pop-up gemakkelijk door beheerders aangepast kan worden. -->
<?php
/** @var \Core\User */
$user = Locator::get('User');
?>
<?php if ($user->isEditor()) { ?>
	<button data-target="#FIXME:" class="btn btn-primary show-modal">
		Open modal
	</button>
<?php } ?>

CSS
Kopiëren.modal.modal-popup .modal-header-overlay {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 2;
}

.modal.modal-popup .modal-header-overlay [data-dismiss="modal"] {
	height: 1.375em;
	width: 1.375em;
	margin: 0.375rem;
	background-color: white;
	display: inline-block;
	line-height: 1;
	border-radius: 999px;
	font-size: 1.5rem;
	text-align: center;
}

.modal.modal-popup .modal-content {
	overflow: hidden;
}

.modal.modal-popup .modal-body:has([data-preset-count="1"] > [data-partial="image"]) {
	padding: 0;
}

JS
KopiërenonComplete(() => {
	const POPUP_IDENTIFIER = 'FIXME:'
	const POPUP_REMEMBER_IN_DAYS = 5

	if (
		!document.documentElement.hasAttribute('data-logged') ||
		document.documentElement.getAttribute('data-logged') === 'false'
	) {
		const popupElement = document.getElementById(POPUP_IDENTIFIER)
		const presetList = popupElement.querySelector('[data-partial="preset-list"]:not([data-preset-count="0"])')
		if (presetList) {
			const lastShown = window.util.cookies.get(POPUP_IDENTIFIER + '-last_shown')
			if (!lastShown) {
				const modalData = window.modalShow.show('#' + POPUP_IDENTIFIER)
				if (modalData) {
					window.util.cookies.set(POPUP_IDENTIFIER + '-last_shown', (new Date()).toISOString(), POPUP_REMEMBER_IN_DAYS)
				}
			}
		}
	}
})