Modal, czyli wyskakujące okienko dla każdego

|

Wyskakujące okienko nie brzmi dzisiaj dobrze. Większość zaprawionych internautów kojarzy je z natrętnymi reklamami i gołymi paniami wyskakującymi w najmniej odpowiednim momencie. Nie da się jednak ukryć, że w większości przypadków dobrze spełnia swoją rolę, tym bardziej, że od kilku lat towarzyszy nam w mniej natrętny i milszy oku sposób - jako modal. W dzisiejszym artykule chcę przedstawić trzy moim zdaniem najpopularniejsze i możliwie mało natrętne sposoby wykorzystania modalnych okienek.

Zobacz demo

Co będzie potrzebne

Tradycyjnie już bazą dla naszego przykładu będzie Twitter Bootstrap. W swojej bogatej kolekcji pluginów posiada też skrypt pozwalający na łatwą i bezproblemową obsługę modali. Wykorzystamy też plugin jquery.cookie, by zapisywać informacje o zaprezentowanym okienku.

Przykład 1 - Facebook Likebox

Modale zdecydowanie najczęściej wykorzystywane są do nakłonienia użytkowników do polubienia naszej strony w serwisach społecznościowych, głównie na Facebooku.

HTML

Kod HTML jest bardzo prosty. Niemal w całości pochodzi z dokumentacji Bootstrapa. W .modal-body wstawiamy własną treść - w naszym przypadku ramkę z Likeboxem.

<div class="modal fade" id="modal-facebook" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title" id="modal-label">Polub nas na Facebooku!</h4>
			</div>
			<div class="modal-body">
				<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FwebmastahPL&width=540&height=320&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false&appId=727043607310448" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:540px; height:300px;" allowTransparency="true"></iframe>
			</div>
		</div>
	</div>
</div>

JavaScript

Kod jQuery to zaledwie kilka linii. Najpierw inicjujemy plugin na elemencie zawierającym modal. Przy okazji ustawiamy kilka ważnych opcji:

  • keyboard - pozwala (lub nie) na zamykanie modala klawiszem Esc
  • backdrop - odpowiada za zamykanie okienka poprzez kliknięcie na zaciemnioną część strony
  • show - sprawia, że modal zostanie wyświetlony przy jego inicjalizacji
$('#modal-facebook').modal({ keyboard: false, backdrop: 'static', show: false })

Opcję show ustawiamy domyślnie na false, gdyż wyświetlaniem okienka chcemy sterować ręcznie. Likeboxa wyświetlamy tylko w przypadku braku odpowiedniego ciasteczka.

if($.cookie('modalfacebook') !== 'true') {
	$('#modal-facebook').modal('show');
}

Po zamknięciu modala ustawiamy cookie, ważne 7 dni, by przez najbliższy tydzień nie męczyć nim użytkownika. Można pokusić się o rozwinięcie i usprawnienie tego przykładu - wyświetlać Likeboxa tylko jeśli użytkownik nie polubił jeszcze naszej strony na Facebooku, ale pozostawiam to wam jako zadanie domowe 😉

$('#modal-facebook').on('hidden.bs.modal', function() {
	if($.cookie('modalfacebook') != 'true') {
		$.cookie('modalfacebook', 'true', { expires: 7 });
	}
});

Przykład 2 - Newsletter

Kolejnym przykładem wykorzystania modali są formularze newsletterów, zachęcające do mailowej subskrypcji treści.

HTML

<div class="modal fade" id="modal-newsletter" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title" id="modal-label">Zapisz się, nie przegap kolejnych tekstów!</h4>
			</div>
			<form target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify" class="widget_rss_subscription">
				<div class="modal-body">
					<ul>
						<li>Powiadomienia o nowych artykułach</li>
						<li>ŻADNEGO SPAMU!</li>
						<li>Anulowanie w każdym momencie</li>
					</ul>
					<p>Wpisz swojego maila i bądź na bieżąco!</p>
						<input type="text" name="email" placeholder="Twój email" class="form-control">
						<input type="hidden" name="uri" value="webmastah">
						<input type="hidden" value="pl_PL" name="loc">
				</div>
				<div class="modal-footer">
					<button type="submit" value="Subscribe" class="btn btn-success">Zapisz mnie!</button>
				</div>
			</form>
		</div>
	</div>
</div>

JavaScript

Inicjalizacja i wyświetlanie wygląda podobnie jak w poprzednim przykładzie. Różnica tkwi w zamykaniu. Po wypełnieniu i wysłaniu formularza ustawiamy ważne rok ciasteczko, wysyłamy dane (w naszym przykładzie jest to uruchomienie Feedburnera) i wreszcie zamykamy modala.

$('#modal-newsletter form').on('submit', function() {
	$.cookie('modalnewsletter', 'true', { expires: 365 });
	window.open('http://feedburner.google.com/fb/a/mailverify?uri=webmastah', 'popupwindow', 'scrollbars=yes,width=550,height=520');
	$('#modal-newsletter').modal('hide');
});

Przykład 3 - Tylko dla dorosłych

Ostatnim przykładem będzie modal z prostą weryfikacją wieku odwiedzającego naszą stronę użytkownika. Często spotykany na stronach prezentujących strony zawierające treści nieodpowiednie dla nieletnich, jest dobrym zabezpieczeniem przed konsekwencjami prawnymi dla właścicieli takich witryn.

<div class="modal fade" id="modal-agecheck" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-agecheck="deny" aria-hidden="true">×</button>
				<h4 class="modal-title" id="modal-label">Uwaga!</h4>
			</div>
			<div class="modal-body">
				<div class="alert alert-danger">
					<p>Strona zawiera ofertę dostępną wyłącznie dla osób pełnoletnich.</p>
					<p>Czy masz ukończone 18 lat?</p>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-success" data-agecheck="confirm">Tak</button>
				<button type="button" class="btn btn-danger" data-agecheck="deny">Nie</button>
			</div>
		</div>
	</div>
</div>

Po potwierdzeniu wymaganego wieku przez użytkownika zapisujemy cookie i zamykamy okienko. W przeciwnym razie przekierowujemy stronę na inny adres.

$('#modal-agecheck [data-agecheck=confirm]').on('click', function() {
	$.cookie('modalagecheck', 'true', { expires: 365 });
	$('#modal-agecheck').modal('hide');
});
$('#modal-agecheck [data-agecheck=deny]').on('click', function() {
	window.location.href = 'https://webmastah.pl';
});

Jeśli nie Bootstrap to co?

miś

Jak już wcześniej wspomniałem Bootstrap jest zbiorem pluginów. Oznacza to, że w jego źródłach można łatwo znaleźć skrypt odpowiedzialny tylko za modalne okienka. Można go osadzić na dowolnej stronie i nie powinien „gryźć się” z innymi wtyczkami. Pozostaje jednak problem z CSS-em - tu można albo wyciąć z Bootstrapa fragmenty odpowiedzialne za modale, albo skompilować go przy pomocy LESSa, albo ostylować samodzielnie.

Zobacz demo Pobierz .zip

Dodaj na LinkedIn
Mariusz Kuta
Programista (PHP/MySQL, Node.js/MongoDB), koder (HTML/CSS/JS), ale od biedy nawet layout machnie ;)