Pokaż modal z opóźnieniem czasowym

HTML 5 jQuery by zagi

W artykule przedstawię wam jak otworzyć okno modal na stronie internetowej z opóźnieniem. Będzie to przydatne w kontekście podkreślenia tzw. CTA czyli „call to action” na przykład: zapisz się do newslettera, wyświetlenie baneru reklamowego lub wyświetlenie zakładki z twojej strony na Facebook’u.

Zanim jednak przejdziesz dalej zastanów się czy będzie to potrzebne na Twojej stronie. Za każdym razem kiedy przeglądam internet jestem przytłoczony wyskakującymi okienkami. Zazwyczaj zamykam je natychmiast. Jednakże są sytuacje, w których taka funkcjonalność może przynieść korzyść. Właśnie tak było w przypadku zlecenia, które wykonywałem dla jednego z moich klientów. Mianowicie chodziło o to, żeby po pewnym czasie przeglądania strony wyświetlić modal z możliwością zapisania się do newslettera sklepu internetowego.

Nie chcieliśmy, żeby było to przytłaczające, więc ustaliliśmy, żeby modal wyświetlał się dopiero po jakimś czasie, a w przypadku jego zamknięcia zapisujemy informacje o tym, że został już wyświetlony i nie wyświetlamy go do momentu aż „cookie” wygaśnie.

W razie zapisania się do newslettera znacznie wydłużamy długość przechowywania danych o wyświetlonym już oknie.

IMPLEMENTACJA

Zaczynamy. Dla niecierpliwych wrzuciłem przykład tutaj.

Do wykonania tego przykładu będziemy używać bootstrap4 i jego wbudowanych modali oraz wtyczki jquery do zarządzania ciasteczkami.

Podstawowy template:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Newsletter z opóźnieniem</h1>
	
	<div id="newsletterModal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-body">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="E-mail">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary newsleter-submit">Dodaj</button>
				</div>
			</div>
		</div>
	</div>
	
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js"></script>
	
	<script>
		// tutaj wstawimy swój kod
	</script>
	
  </body>
</html>

Zauważ, że korzystam z róznego rodzaju CDN, ale przy realnym projekcie zachęcam do używania menagerów paczek np. npm albo bower

WYŚWIETLANIE MODALA

Wyświetlanie jest banlanie proste przy użyciu Bootstrap’a: $('#newsletterModal').modal('show');

Generalnie Bootstrap dostarcza wiele komponentów gotowych do użycia „right away”. Jeśli chodzi o modale to jak sami widzicie jest to kwestia jednej linijki…

OPÓŹNIENIE

Teraz chcielibyśmy opóźnić jego wyświetlenie o kilka sekund(w naszym przypadku przyjmijmy, że tą wartością będzie 5s). Tutaj z pomocą przyjdzie nam wbudowana w JavaScript funkcja setTimeout. Jest to natywna funkcja, która wywołuje wykonanie innej funkcji lub wykonuje zadeklarowany kawałek kodu.

setTimeout(function(){
	$('#newsletterModal').modal('show');
}, 5000)

Dzięki tej deklaracji w kodzie źródłowym naszej strony, naszemu klientowi(odwiedzającemu), po pięcio sekundowym opóźnieniu uruchomi się modal z możliwością zapisu do newslettera.

ZAPAMIĘTANIE WYŚWIETLANIA

Najważniejsze, żeby nasz modal nie wyświetlał się za każdym razem po przeładowaniu strony jeśli został wcześniej zamknięty lub wypełniony. Mamy dwa przypadki:

  • klient zamknął modal
  • klient wypełnił pole i kliknął „Zapisz”

W pierwszym przypadku zapiszemy ciasteczko o wyświetlaniu na krócej(w naszym wypadku będzie to 10 dni). W drugim zaś zapamiętamy tą informacje na 1 rok(skoro już się zpaisał, to nie chcemy, żeby wyskakujące okienko psuło mu dalsze przeglądanie).

Będziemy do tego potrzebowali js-cookie. Paczkę która w łatwy sposób pozwoli nam obsłużyć ciasteczka.

Przy okazji zrobimy mały porządek z kodem i wypchniemy wywołanie modala do oddzielnej funkcji.

Dodamy również ciekawą funkcjonalność. Tuż przed otwarciem modala zapiszemy gdzie skupiony był kursor naszego użytkownika, żeby po jego zamknięciu móc wrócić do tego elementu(np. pola formularza). Użyjemy do tego wbdudowanej w jQuery focus().

var $lastFocus = null,
	$modal = null,
	$input = null;

var newsletterModal = {
	onShow: function() {
		$('input').focus();
	},
	onClose: function() {
		$lastFocus.focus();
		Cookies.set('newsletterDisplayed', '1', { expires: 10 });
	},
	onSubmit: function() {
		Cookies.set('newsletterDisplayed', '1', { expires: 365 });
	}
};
	
$(document).ready(function(){
	$modal = $('#newsletterModal');
	$input = $('.newsleter-submit');
	
	$modal.on('show.bs.modal', newsletterModal.onShow);
	$modal.on('hide.bs.modal', newsletterModal.onClose);
	$input.on('click', newsletterModal.onSubmit);
	
	setTimeout(function() {
		var displayed = Cookies.get('newsletterDisplayed');
		if(!displayed) {
			$lastFocus = $(':focus');
			$modal.modal('show');
		}
	}, 5000);
});

DEMO

Cały przykład dostępny jest do podglądu tutaj.

Gotowe! 🙂