Docela často můžete na webových stránkách najít modální okna a všechna se používají pro různé úkoly. Ve skutečnosti je to docela výkonný nástroj, který vám umožní vytvořit interaktivní a pohodlnější rozhraní webu. Modální okna lze například použít pro různé formuláře, jako je přihlašovací formulář, zpětná vazba, objednání zboží a nikdy nevíte.
V tomto příspěvku se podíváme na příklad, jak vytvořit jednoduché modální okno pomocí JQuery a CSS. Zvláštností tohoto příkladu je, že není vyžadován, tedy s výjimkou samotné knihovny JQuery.
Umístěte kód modálního okna na stránku:
close Otevřít modální okno
Jak můžete vidět z označení, samotný blok modálního okna je div s atributem id= modální_forma který obsahuje prvek span s id= modal_close. Tento prvek bude sloužit jako tlačítko pro zavření modálního okna, navíc je umístěn pod blokem div blok s atributem id= překrytí, který zároveň slouží ke ztmavení pozadí. Modální okno se otevře odkazem s třídou modální.
CSS pro modální okno
#modal_form ( width: 300px; height: 300px; border-radius: 5px; border: 3px #000 solid; background: #fff; position: fixed; top: 45%; left: 50%; margin-top: -150px; margin-left: -150px; display: none; neprůhlednost: 0; z-index: 5; padding: 20px 10px; ) #modal_form #modal_close ( šířka: 21px; výška: 21px; pozice: absolutní; nahoře: 10px; vpravo: 10px; kurzor: ukazatel; displej: blok; ) #overlay ( z-index:3; position:fixed; background-color:#000; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=80) ; šířka: 100 %; výška: 100 %; nahoře: 0; vlevo: 0; kurzor: ukazatel; zobrazení: žádné; )
Pro modální_forma nastavili jsme pevnou šířku a výšku a poté polohu vycentrovali na střed obrazovky. Pro pozadí modálního okna ( překrytí) nastavíme velikost tak, aby odpovídala šířce obrazovky, vyplnila průhledností a také ji ve výchozím nastavení skryla. Zvláštní okamžik s z-index, modal by měl mít největší ze všech prvků na stránce a obal by měl mít největší ze všech prvků kromě samotného modalu.
Nyní k nejzákladnější věci, toto je kód javascriptu. Pro modální okno budou použity dvě hlavní události: jeho otevření - kliknutí na prvek s třídou modální, v našem případě se jedná o odkaz a zavření modálního okna je kliknutím na obálku ( překrytí), nebo klikněte na tlačítko Zavřít, v našem případě se jedná o prvek span s id= modal_close.
$(document).ready(function() ( $(".modal").click(function(event)( event.preventDefault(); $("#overlay").fadeIn(400, // animace zobrazení funkce krytu ()( // dále zobrazí mod okno $("#modal_form") .css("display", "block") .animate((opacity: 1, top: "50%"), 200); )); )); // zavření modálního okna $("#modal_close, #overlay").click(function())( $("#modal_form") .animate((opacity: 0, top: "45% "), 200, // zmenšení funkce průhlednosti())( // po animaci $(this).css("display", "none"); // skrytí okna $("#overlay").fadeOut (400); // skrýt pozadí ) ); )); ));
Pomocí animate měníme vertikální polohu horní a také transparentnost neprůhlednost, a tím získáme zajímavý efekt. Podobný efekt se používá jak při otevírání okna, tak při jeho zavírání. Rozdíl je v tom, že se mění pořadí, ve kterém jsou vlastnosti aplikovány na bloky, čímž se vizualizuje otevírání a zavírání okna.
3. Příklad modálního okna jQuery volaného z odkazu (z Demo)
S největší pravděpodobností jste již nejednou viděli vyskakovací modální okno na internetu - potvrzení registrace, varování, referenční informace, stažení souboru a mnoho dalšího. V tomto tutoriálu nabídnu několik příkladů, jak vytvořit nejjednodušší modální okna.
Vytvoření jednoduchého vyskakovacího modálního okna Začněme se dívat na kód jednoduchého modálního okna, které se okamžitě objevíkód jQuery
$(document).ready(function()
{
alert("Text ve vyskakovacím okně");
});
Vložte kód kamkoli do těla své stránky. Ihned po načtení stránky, bez jakýchkoli příkazů, uvidíte okno, které vypadá takto:
Následující kód se však spustí po načtení celé stránky do prohlížeče. V našem příkladu po načtení stránky s obrázky vyskočí jednoduché vyskakovací okno:
$(window).load(function()
{
alert("Stránka byla dokončena načítání!)");
});
Často můžete vidět, že přihlašovací a registrační formuláře jsou umístěny v takových oknech. Pojďme pracovat
Nejprve si napíšeme html část. Tento kód umístíme do těla vašeho dokumentu.
Vyvolání modálního okna
Text modálního okna
Zavřít
Text v modálním okně.
CSS kód. Buď v samostatném css souboru, nebo v hlavě.
tělo(
font-family:verdana;
font-size:15px;
}
.link (color:#fff; text-decoration:none)
.link:hover (color:#fff; text-decoration:underline)
#maska (
poloha:absolutní;
vlevo:0;
nahoře:0;
z-index:9000;
background-color:#000;
displej:žádný;
}
#boxes.window (
poloha:absolutní;
vlevo:0;
top:0px;
-horní: 40px;
šířka:440px;
výška:200px;
displej:žádný;
z-index:9999;
výplň: 20px;
přepad: skrytý;
}
#boxy #dialog (
šířka:375px;
výška:203px;
padding:10px;
background-color:#ffffff;
}
.horní(
poloha:absolutní;
vlevo:0;
nahoře:0;
šířka:370px;
výška:30px;
pozadí: #0085cc;
výplň: 8px 20px 6px 10px;
}
.zavřít(
plovák:pravý;
}
.obsah(
padding-top: 35px;
}
V kódu jQuery se zaměříme na pozici modálního okna a masky, v našem případě postupné ztmavování pozadí.
Pozornost! Nezapomeňte do hlavy dokumentu zahrnout knihovnu!
Připojení knihovny z webu Google. No, samotný kód jQuery.
kód jQuery
$(document).ready(function() (
$("a").click(funkce(e) (
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$("#mask").css(("width":maskWidth,"height":maskHeight));
$("#mask").fadeIn(1000);
$("#mask").fadeTo("pomaly",0.8);
var winH = $(okno).vyska();
var winW = $(okno).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("vlevo", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(funkce (e) (
e.preventDefault();
$("#maska, .okno").hide();
});
$("#mask").click(funkce () (
$(toto).hide();
$(".okno").hide();
});
});
Když mluvíme o různých technikách vytváření webových stránek, bylo by směšné nemluvit o některých způsobech vytváření modálních oken. Nebudeme diskutovat o účelu, užitečnosti a vznikajících problémech používání vyskakovacích a modálních oken. Podívejme se jen na jeden z mnoha příkladů vytváření takových oken.
Existují situace, kdy není možné použít speciální pluginy, jako jsou a, takže stojí za to pochopit, jak si můžete vytvořit svůj vlastní.
Podívejme se, jak to udělat:
HTMLZačněme přidáním značek s následujícími atributy:
- href - #?w=500 označuje šířku okna
- rel – jedinečný atribut pro každé okno
- class="poplight" – třída pro zobrazení vyskakovacího okna
| < a href= "#?w=500" rel= "popup_name" class = "poplight" >Viz okno v akci – šířka = 500 pixelů |
Viz okno v akci – šířka = 500 pixelů
Dále musíme vytvořit vložené označení pro vyskakovací okno. Můžete jej umístit kamkoli na stránku, například pod obsah. Všimněte si, že ID vyskakovacího okna odpovídá atributu rel značky
Tím se spojí odkaz a vyskakovací okno.
Nadpis
Jakýkoli text, který chcete
A tak jsme vymysleli umístění našeho okna na stránce, nyní jej ozdobíme pomocí stylů, dáme mu takříkajíc decentní vzhled.
Pro větší přehlednost jsem sepsal několik vysvětlení parametrů stylu našeho okna. Vzhledem k tomu, že vyskakovací okna mohou mít různé velikosti, neurčujeme okraje okna v CSS popup_block, vypočítat požadovanou velikost je přesně úkolem pro .
| #fade ( display : none ; /* -- výchozí skryté--*/ pozadí: rgba (7, 87, 207, 0,8); poloha: pevná; vlevo: 0; nahoře: 0; šířka: 100 %; výška: 100 %; neprůhlednost: 0,80; z-index: 9999; ) .popup_block ( display : none ; /*--skryté ve výchozím nastavení--*/ background : #fff ; padding : 20px ; border : 8px solid rgb (134 , 134 , 134 ) ; float : left ; font-size : 85 %; pozice: pevná; nahoře: 50 %; vlevo: 50 %; barva: # 000; max. šířka: 750 pixelů; min. šířka: 320 pixelů; výška: auto; z-index: 99999; /*--CSS3 blokový stín --*/ -webkit-box-shadow: 0px 0px 20px #000 ; -moz-box-shadow: 0px 0px 20px #000 ; box-shadow : 0px 0px 20px #000 ; /*--CSS3 zaoblení rohů--* / -webkit-border-radius: 12px ; -moz-border-radius: 12px ; border-radius : 12px ; ) .popup_block p ( font-weight : 400 ; padding : 0 ; margin : 0 ; color : #000 ; line -height : 1.6 ; .popup_block h2 ( margin : 0px 0 10px ; color : rgb (43 , 43 , 43 ) ; font-weight : 400 ; text-align : center ; text-shadow : 1px 10px 2C0px #0D * vytvořte tlačítko pro zavření */ .close ( barva pozadí : rgba ( 61 , 61 , 61 , 0,8 ) ; border : 2px solid #ccc ; výška: 25px; line-height: 20px; pozice: absolutní; vpravo: -17px; váha písma: tučné; text-align: center; text-dekorace: žádná; výplň: 0; horní: -17px; šířka: 25px; -webkit-border-radius: 50 % ; -moz-border-radius: 50 % ; -ms-border-radius: 50 % ; -o-border-radius: 50 % ; okraj-radius : 50 % ; -moz-box-shadow: 1px 1px 3px #000 ; -webkit-box-shadow: 1px 1px 3px #000 ; box-shadow : 1px 1px 3px #000 ; ) .close : before ( color : rgba (255 , 255 , 255 , 0.9 ); content : "X" ; font-size : 12px ; text-shadow : 0 -1px rgba (0 , 0 , 0 , 0.9)9 ) .close: hover (barva pozadí: rgba (252, 20, 0, 0,8); ) .shadow ( box-shadow : 4px 4px 10px #857373 ; -webkit-box-shadow: 4px 4px 103px #8573 box-shadow: 4px 4px 10px #857373; padding: 0; ) /*--pevné umístění pro IE6--*/ * html #fade (pozice: absolutní; ) * html .popup_block (pozice: absolutní; ) |
#fade ( zobrazení: žádné;/*--ve výchozím nastavení skryté--*/ pozadí: rgba(7, 87, 207, 0,8); poloha: pevná; vlevo: 0; nahoře: 0; šířka: 100 %; výška: 100 %; neprůhlednost: 0,80; z-index: 9999; ) .popup_block ( display: none; /*--skryté ve výchozím nastavení--*/ pozadí: #fff; padding: 20px; border: 8px solid rgb(134, 134, 134); plovoucí: vlevo; velikost písma: 85 %; poloha: pevná; horní: 50 %; vlevo: 50 %; barva: # 000; max. šířka: 750 pixelů; minimální šířka: 320 pixelů; výška: auto ; z-index: 99999; /*--CSS3 box shadow--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; /*--CSS3 zaoblení rohů--*/ -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; ) .popup_block p ( font-weight: 400; padding: 0; margin: 0; color: #000; line-height: 1.6;).popup_block h2 ( margin: 0px 0 10px; color: rgb(43, 43, 43); font-weight: 400; text-align : center; text-shadow: 1px 1px 2px #0D0C0C; ) /* tvoří tlačítko pro zavření */ .close ( background-color: rgba(61, 61, 61, 0.8); ohraničení: 2px solid #ccc; výška: 25px; line-height: 20px; pozice: absolutní; vpravo: -17px; váha písma: tučné; text-align: center; text-decoration: žádné;výplň: 0; horní: -17px; šířka: 25px; -webkit-border-radius: 50 %; -moz-border-radius: 50 %; -ms-border-radius: 50 %; -o-border-radius: 50 %; hraniční rádius: 50 %; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; ) .close:before ( barva: rgba(255, 255, 255, 0,9); obsah: "X"; velikost písma: 12px; stín textu: 0 -1px rgba(0, 0, 0, 0,9); ) .close:hover ( barva pozadí: rgba(252, 20, 0, 0,8); ) .shadow ( box-shadow: 4px 4px 10px #857373; -webkit-box-shadow:4px 4px 10px #857373; -moz- box-shadow:4px 4px 10px #857373; padding:0; ) /*--pevné umístění pro IE6--*/ *html #fade ( pozice: absolutní; ) *html .popup_block ( pozice: absolutní; )
Se vznikem okna a jeho vzhled pomocí css si myslím, že nebudou žádné zvláštní potíže. Styly můžete zaregistrovat přímo na HTML stránku, mezi značky a, nebo jej můžete umístit do samostatného souboru vašich stylů, obvykle je to soubor style.css nebo něco podobného.
Nastavení JQueryAby modální okno plně fungovalo, musíte připojit jQuery, číst mohou ti, kteří práci této knihovny neznají.
No, půjdeme dál. Můžete udělat maximum Nejnovější verze JQuery z webových stránek knihovny nebo použijte samostatný soubor umístěný v hlubinách Google a propojte jej s dokumentem v sekci před uzavírací značkou a umístěte následující řádek:
V dalším kroku se podíváme na náplň a funkce pluginu jquery pro aktivaci našeho vyskakovacího okna, kód obsahuje některá vysvětlení pro lepší pochopení toho, co děláme.
Obecně platí, že pokud nepůjdete do plevele a nezatěžujete se zbytečnou zbytečností kódu, naše skvělé modální okno je připraveno k práci a čeká na vaše myšlenky převedené do textu nebo jiného užitečné informace.
Pro ty, kteří by chtěli použít modální okno k umístění videí nebo obrázků ve velkém měřítku, jsem přesto doporučil používat speciální pluginy jako , protože výše uvedený příklad modálního okna je určen spíše pro lehké a nepříliš těžké informace, i když toto není problém v případě potřeby .
Příště vám to určitě řeknu a ukážu na příkladu a určitě mnohé bude zajímat, když se ve vyskakovacím okně dozví o dalších objektech třetích stran. Tak se neztraťte na webu a zůstaňte naladěni!
Aktualizace: Verze dm-modal.js v1.3 (15. 1. 2017)
Oprava: Nahrazena zastaralá funkce .live() pomocí syntaxe href*=\\#. Plugin nyní funguje s aktuální verze jQuery knihovny
To je vše! Doufám, že to byla další užitečná lekce.
Se vší úctou, Andrew
Modální okna jsou nedílnou součástí moderního webdesignu, s jejich pomocí se vývojář může uchýlit k metodě smyčkování na jedné stránce a nepřesměrování návštěvníka na vedlejší stránky. V tomto tutoriálu se podíváme na to, jak vytvořit úžasná modální okna pomocí rozmazané pozadí pro web s pomocí jQuery a CSS3. Díky těmto pravidlům vytvoříme při zobrazení okna rozmazané pozadí, které bude poutat oko návštěvníka pouze k nezbytným informacím na webu.
Modální okna s rozmazaným pozadím v CSS3Nejlepší ekonomické zprávy jsou pouze zde: Drobakha
Animace okna bude nastavena tak, že po kliknutí na tlačítko pro zobrazení se okno animuje shora dolů a automaticky se zvětší rozostření pozadí.
Krok 1. HTMLBudeme mít kontejner, který bude obsahovat: title, description, pak přidáme třídu pro tlačítko s třídou toggleModal, abychom otevřeli modální okno:
Nadpis
Popis
Otevřít článek Název pro oknoKarty jsou velmi zajímavou a pohodlnou věcí při vytváření webu, umožňují vám správně uspořádat informace a zároveň šetřit místo na webu.
ZavřítPak musíme přidat modální třídu is-active, tato třída bude zodpovědná za volání modálního okna, modal__header je zodpovědná za nadpis a jeho styling okna.
Krok 2: CSSNyní přejdeme ke stylování, prvním krokem bude třída tlačítka, která bude, jak jste uhodli, zodpovědná za tlačítka na webu, nastavili jsme pro ni správné parametry zobrazení:
Tlačítko ( pozadí: žádné; klip na pozadí: vycpávka; zobrazení: vložený blok; ohraničení: 0; výběr uživatele: žádný; -webkit-touch-callout: žádný; -vzhled-webkitu: tlačítko; -webkit-user -select: none; -moz-user-select: none; -ms-user-select: none; )
Kontejner ( pozice: relativní; okraj: 0 automaticky; max. šířka: 960 pixelů; velikost pole: border-box; padding-top: 40 pixelů; )
článek ( background: #fff; padding: 20px; margin-bottom: 40px; border-radius: 5px; ) .modal ( display: none; position: fixed; top: 50%; width: 100%; height: auto; margin -top: -150px; background-color: $color-white; border-radius: 3px; z-index: 999; box-shadow: 0px 1px 3px 0px darken($color-bg, 10%); @media #( $small) ( vlevo: 50 %; okraj-left: -260px; max-width: 520px; ) &.is-active ( display: block; animace: 1s linear slide; ) .inner ( position: relativní; padding: 20px ; ) .modal__header ( border-bottom: 1px solid darken($color-bg, 5%); ) .modal__footer (text-align: center; button ( display: inline-block; ) )Styly jsou celkem jednoduché, jsou uložené samostatný soubor a neměly by způsobit potíže při jejich úpravě vývojáři, který se alespoň jednou setkal s CSS.
Krok 3. JSNaší poslední, ale neméně důležitou, bude nastavení automatického rozostření pozadí při zobrazení menu a také klikatelnost odkazů, pomohou nám s tím malá pravidla JS:
$("body").addClass("je-rozmazané"); $(".toggleModal").on("click", funkce (událost) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClass ("je-rozmazaný"); ));
Výsledkem jsou nádherná modální okna, která lahodí oku diváka a nezatěžují váš design.
1. Modální okno na jQuery „Simple Modal Box“ 2. plugin jQuery"LeanModal"Zobrazování obsahu v modálních oknech. Chcete-li vidět plugin v akci na ukázkové stránce, klikněte na odkaz: Registrační formulář nebo Základní obsah.
3. plugin jQuery „ToastMessage“Vyskakovací zprávy. Plugin je k dispozici ve dvou verzích. V jednom případě zprávy po určité době zmizí samy, ve druhé implementaci musíte pro uzavření zprávy kliknout na tlačítko.
4. Obsah, který se objeví v modálním okněPlugin "Odhalit". Chcete-li vidět plugin v akci, klikněte na tlačítko „Fire A Reveal Modal“ na stránce ukázky.
5. Roztomilá dialogová oknaKliknutím na křížek na ukázkové stránce uvidíte plugin v akci.
6. Modální okno Mootools, plugin „MooDialog“ 7. vyskakovací panel jQuery v horní části obrazovky 8. vyskakovací okno jQueryPlugin jQuery pro zobrazení formuláře zpětné vazby ve vyskakovacím okně.
10. MooTools plugin “LightFace” pro implementaci dialogová okna FacebookDialogová okna ve stylu Facebooku. Kromě statických informací můžete do oken umístit obrázky, snímky a požadavky Ajax. Existuje mnoho nastavení, jak plugin funguje, velmi Výkonný nástroj. Vypadá velmi stylově a funkčně. Chcete-li zobrazit příklady s různým obsahem, postupujte podle odkazů na stránce s ukázkou.
11. Modální okno jQueryÚhledný vyskakovací dialog v jQuery.
12. Modální okna jQueryRoztomilá vyskakovací modální okna. Tři styly. Ukázková stránka obsahuje 3 odkazy na otevřená okna.
13. Modální okna jQueryVyskakovací modální okna několika typů. Chcete-li vidět plugin v akci, klikněte na odkaz na ukázkové stránce.
15. Zpráva, která se objeví v horní části stránkyZpráva se zobrazí v horní části stránky, která je naopak šedě. Kliknutím na „Klikněte na mě“ na stránce ukázky zobrazíte vyskakovací zprávu. Kliknutím na křížek jej zavřete. Implementováno pomocí jQuery.
16. Modální okno „ModalBox“ v javascriptuImplementujte moderní modální dialogy bez použití vyskakovacích oken a opětovného načítání stránky. Na stránce ukázky klikněte na tlačítko „Spustit ukázku“, abyste viděli skript v akci.
17. Plugin „Leightbox“ využívající knihovnu PrototypePlugin pro zobrazování obsahu v modálních oknech.