Kod

Techniki tworzenia modalnych okien

Okna modalne są najczęściej opisywane jako cokolwiek, co przyciąga uwagę użytkownika i nie pozwala im powrócić do poprzedniego stanu, dopóki nie wejdą w interakcję z obiektem, o którym mowa.

Teraz jest to nieco zawiłe i myślę, że lepiej jest zająć się kilkoma przykładami stron internetowych, które naprawdę dobrze wykorzystują tę technikę. Jednym z nich jest Zbuduj to ze mną co to naprawdę dobrze. Jeśli przejdziesz do ich strony i klikniesz Zarejestruj się, zobaczysz bardzo dosłowny przykład, kiedy modalne pudełko po prostu działa.

Często podczas pracy z modami są one używane do czyszczenia interfejsów użytkownika i próbowania zwiększenia wygody użytkownika - ale ważne jest, aby pamiętać, że czasami robią dokładnie odwrotnie. Rozważ irytujące strony ze zbyt wieloma wyskakującymi wyskakującymi wyskakującymi wyskakującymi ikonami JavaScript lub stronami ze spamem, które rzeczywiście potwierdzają , że chcesz opuścić witrynę. To niedorzeczne, a strony, które robią te rzeczy, są absolutnie bezużyteczne, więc upewnij się, że wiesz, jak korzystać z dialogów modalnych, zanim zaczniesz wdrażanie.

Aby dać ci lepszy przykład, jak zrobić to dobrze, porozmawiamy z teorią, a następnie przejdziemy do przykładów, aby pokazać, jak wdrożyć je w responsywny projekt. Przejdźmy więc do teorii.

Teoria modalna

Podstawowa teoria elementu interfejsu użytkownika dla modałów może być raczej przeplatana z innymi twierdzeniami UI, które tylko dotkniemy tutaj. Zasadniczo to, na co patrzymy, jest koniecznością, gdy potrzebujemy, aby użytkownik kliknął konkretną sekcję strony i aby skupił się na tej sekcji tylko do momentu ukończenia zadania, które oferuje ta sekcja.

Może to być wykorzystane do wielu różnych rzeczy, takich jak loginy użytkownika, elementy formularzy, strony pobierania lub może po prostu wyświetlić zdjęcie i spojrzeć na komentarze tego zdjęcia. Facebook wykorzystuje to, aby pomóc Ci skupić się na interakcji po kliknięciu na zdjęcie, ale oczywiście pozwala ci również przeglądać zdjęcia. Możesz je kliknąć, a następnie odbiera całą zdolność interakcji ze stroną główną, dopóki nie klikniesz poza polem modalnym lub nie klikniesz "x", aby powrócić.

Podstawowa teoria modalna jest jednak bardzo interesująca i naprawdę opiera się na zasadach, które właśnie poruszyliśmy. Przeanalizujmy przypadek użycia, abyś mógł lepiej zrozumieć, kiedy i dlaczego go użyć.

Załóżmy, że prowadzisz stronę, na której użytkownicy mogą się rejestrować i logować do magazynu, który od Ciebie wynajęli (magazyn online). Cóż, jako firma jesteście niesamowicie uzależnieni od tych użytkowników, którzy mają wielki przepływ od lądowania na stronie głównej do logowania. Ponieważ jest to jedna z najważniejszych rzeczy, które oferuje twoja strona, chciałbyś, aby użytkownik czuł się zmuszony do logowania i rzeczywiście sprawiają, że jest to dla nich niezwykle łatwe.

Z tego powodu na stronie głównej możesz umieścić duży link do zalogowania lub odpowiednią sekcję, aby to zrobić na stronie głównej, być może w nagłówku. Chociaż problem polega na tym, że w tym drugim przypadku użytkownik nie jest w ogóle wskazany na login, a w pierwszym przypadku użytkownik nie jest zmuszony do podjęcia decyzji.

Teraz nie zgadzam się na zmuszanie użytkowników do robienia czegokolwiek, ale delikatne szturchanie ich jest całkowicie w porządku - i to właśnie miałem na myśli przez "zmuszony". Więc możesz zrobić to mieć link logowania, który otwiera okno modalne z formularzem logowania. W ten sposób nigdy nie będą musieli odejść od strony głównej, a następnie nawigować z powrotem (przez przykład, który przed chwilą napisaliśmy), a także są w 100% świadomi tego, co mają robić w modalu.

To bardzo dobry sposób, aby pomóc użytkownikom zrozumieć, co się dzieje i dlaczego tak się dzieje. Muszę powiedzieć, że użyłem go sam dla klientów, a wskaźnik zatrzymania z lądowania na stronie głównej do logowania wzrósł o 35% w przeszłości, który widziałem. A te z pewnością nie są liczbami, którymi można wstrząsnąć kijem; są to naprawdę wartościowe i jasno zdefiniowane dane na temat tego, jak proste okno modalne może zwiększyć retencję i zmniejszyć współczynnik odrzuceń.

Kodowanie podstawowego okna modalnego

Zanurzmy się w jakimś kodzie, ale na razie lekceważmy, jakiego rodzaju modów użyjemy i wszystkie szczegóły techniczne, a skupmy się tylko na podstawowych podstawach. HTML, CSS i jQuery są tym, na co będziemy się teraz koncentrować.

Elementy HTML

Potrzebujemy dwóch podstawowych elementów, odnośnika do otwarcia okna i samego okna. Link ma wyglądać tak:

Następnie musimy dodać drugie okno:

Zauważ, że oba divy okna są pakowane przez div z modem id. Zauważ także, że id pierwszego modalnego okna odpowiada hrefowi pierwszego linku, a id drugiego modalnego okna odpowiada hrefowi drugiego linku; w ten sposób linki będą kierować do właściwego okna, gdy dojdziemy do jQuery.

Elementy CSS

Musimy naszkicować trzy elementy naszych modalnych okien, zaczniemy od najprostszych: 

#modal .contents{/* style the modal's contents, in this case we're just adding padding */padding:24px;}

Ten kod styluje element div z "treścią" klasy (to ta, która zawija całą naszą zawartość). Tutaj możesz nadać styl zawartości, tak jak w innym miejscu na stronie. Polecam przynajmniej odrobinę wyściółki, ponieważ reguły typograficzne nakazują, że cała treść musi oddychać.

Następnie zamierzamy nadać styl ślepemu. "Whoah, czekaj. Co jest niewidome? Słyszę, jak płaczesz. To bardzo proste: zasłona jest przeciwieństwem maski, użyjemy jej, aby wytrzeć resztę naszej strony, gdy okno będzie widoczne. I nie, nie stworzyliśmy tego w naszym znaczniku, jQuery zrobi to za nas. Na razie musimy po prostu nadać mu styl, tak aby obejmował całą treść okna, a co najważniejsze, znajduje się nad resztą treści na osi Z. 

#blind{/* position element so the z-index can be set */position:absolute;/* set z-index so the blind will cover all page content */z-index:9999;/* set the top, left, width and height so the blind covers the browser window */top:0;left:0;width:100%;height:100%;/* set the background to a suitably dark tone */background-color:#000000;}

Wreszcie dla CSS, musimy zaprojektować nasze okno. Musimy ustawić okno nad żaluzją. Następnie musimy go zmienić przy pomocy właściwości width i height.

Następnie musimy ustawić margines w lewo na połowę szerokości pomnożonej przez -1 (400/2 * -1 = -200), a margines-wierzchołek o połowę wysokości pomnożyć przez -1 (248/2 * -1 = -124). Później użyjemy jQuery do umieszczenia elementu na górze: 50% i lewej: 50%, z powodu tych ujemnych marginesów okno wydaje się być wyśrodkowane, niezależnie od wymiarów przeglądarki i nie będziemy musieli próbować umieść go na podstawie rozmiaru przeglądarki.

Następnie musimy ustawić właściwości left i top na -1000px. Dlaczego mielibyśmy to robić? Cóż, nie chcemy, aby okno modalne było widoczne do momentu kliknięcia linku. Inną popularną techniką jest ustawianie wyświetlania: brak w CSS, ale ostatnio, który zaczął być nadużywany przez spamerów i może być teraz oznaczony przez wyszukiwarki jako technika czarnego kapelusza, szczególnie jeśli masz dużo słów kluczowych w swoim modalu. Ustawiając zamiast tego pozycję na ekranie, osiągamy to samo.

Na koniec chcemy pokolorować okno odpowiednim kolorem strony, białym w tym przypadku.

I tylko na miarę, dlaczego nie zanurzyć się w CSS3 i rzucić cień na skrzynkę tylko po to, by naprawdę wyskoczyć z ekranu - nie jest to krytyczne dla misji i zostanie zignorowane, jeśli nie będzie obsługiwane. 

#modal .window {/* position the element so that the z-index can be applied */position:absolute;/* Set the z-index to a number higher than the blind's z-index */z-index:10000;/* set the width and height of the window */width:400px;height:248px;/* give the window negative margins that match the width/2 and height/2 so it is centered */margin-left:-200px;margin-top:-124px;/* position the top left corner off stage so it can't be seen (instead of display:none;) */left:-1000px;top:-1000px;/* color the background so it shows up */background-color:#ffffff;/* throw on a CSS3 box shadow, because it's cool, and we can */box-shadow:4px 4px 80px #000;-webkit-box-shadow:4px 4px 80px #000;-moz-box-shadow:4px 4px 80px #000;}

JQuery

Na koniec dodamy jQuery do zasilania modala. Musimy to zrobić, przechwytując kliknięcia linków; zlokalizuj odpowiednie okno, a następnie znikaj, tworząc zasłonę za oknem, która zapobiegnie klikaniu na inną zawartość; i wreszcie funkcję zamykania modału, który może zostać uruchomiony przez nasz przycisk zamykania lub kliknięcie poza oknem.

Najpierw musimy uruchomić skrypt tylko wtedy, gdy dokument jest gotowy 

$(document).ready(function(){

Następnie zdefiniuj zmienną, która będzie zawierała odniesienie do okna 

var activeWindow;

Następnie dodaj obsługę kliknięć do linków, funkcja ta uniemożliwi zachowanie domyślnego łącza; zidentyfikować odpowiednie okno z atrybutu href łącza; przypisz go do zmiennej activeWindow; przesunąć okno na środek przeglądarki (pamiętaj o ujemnych marginesach w CSS? To jest, gdzie działają ich magia, ponieważ wszystko, co musimy ustawić, to 50%, aby uzyskać centrum) i zaniknąć; utwórz nowy element div o identyfikatorze "niewidomych", zaniknij go i dołącz do niego funkcję obsługi kliknięcia, która wywoła funkcję closeModal (). 

$('a.modalLink').click(function(e){e.preventDefault();var id = $(this).attr('href');activeWindow = $('.window#' + id).css('opacity', '0').css('top', '50%').css('left', '50%').fadeTo(500, 1);$('#modal').append('
').find('#blind').css('opacity', '0').fadeTo(500, 0.8).click(function(e){closeModal();});});

Następnie musimy dodać obsługę kliknięcia do przycisków zamykania, aby wywołać tę samą funkcję closeModal (), co kliknięcie na ślepo. 

$('a.close').click(function(e){e.preventDefault();closeModal();});

Wreszcie, musimy stworzyć funkcję closeModal (), która przywróci nas do naszego stanu początkowego. Musi zanikać przez okno i przenieść je z powrotem do pozycji wyjściowej po zakończeniu przejścia, a jednocześnie zanikać zaślepkę i usunąć ją z DOM po zakończeniu przejścia. 

function closeModal() {activeWindow.fadeOut(250, function(){ $(this).css('top', '-1000px').css('left', '-1000px'); });$('#blind').fadeOut(250,    function(){ $(this).remove(); });}

Nie zapomnij zamknąć swojego handlera $ (document) .ready! 

});

Dla tych, którzy wolą uczyć się przez kopiowanie i wklejanie, oto pełny skrypt: 

// run when page is ready$(document).ready(function(){// create variable to hold the current modal windowvar activeWindow;$('a.modalLink').click(function(e){// cancel the default link behavioure.preventDefault();// find the href of the link that was clicked to use as an idvar id = $(this).attr('href');// assign the window with matching id to the activeWindow variable, move it to the center of the screen and fade inactiveWindow = $('.window#' + id).css('opacity', '0') // set to an initial 0 opacity.css('top', '50%') // position vertically at 50%.css('left', '50%') // position horizontally at 50%.fadeTo(500, 1); // fade to an opacity of 1 (100%) over 500 milliseconds// create blind and fade in$('#modal').append('
') // create a 
 with an id of 'blind'.find('#blind') // select the div we've just created.css('opacity', '0') // set the initial opacity to 0.fadeTo(500, 0.8) // fade in to an opacity of 0.8 (80%) over 500 milliseconds.click(function(e){closeModal(); // close modal if someone clicks anywhere on the blind (outside of the window)});});$('a.close').click(function(e){// cancel default behavioure.preventDefault();// call the closeModal function passing this close button's windowcloseModal();});function closeModal(){// fade out window and then move back to off screen when fade completesactiveWindow.fadeOut(250, function(){ $(this).css('top', '-1000px').css('left', '-1000px'); });// fade out blind and then remove it$('#blind').fadeOut(250,    function(){ $(this).remove(); });}});

Kluczem do tego procesu jest oddzielenie okna modalnego na jego trzy komponenty: dane (HTML), styl (CSS) i funkcjonalność (jQuery). Istnieją tysiące wariantów, które można wykorzystać do rozwijania tej podstawowej techniki i chcielibyśmy przeczytać niektóre z twoich doświadczeń w komentarzach poniżej.

Jakie są najlepsze przykłady modalnych okien, które widziałeś? Jaka jest twoja ulubiona technika ich tworzenia? Daj nam znać w komentarzach!

css kodowanie jquery html modalne okna