DomovZajímavýZtmavení pozadí při otevírání modálního okna. Modály rozmazaného pozadí s CSS3. Hezká dialogová okna
Ztmavení pozadí při otevírání modálního okna. Modály rozmazaného pozadí s CSS3. Hezká dialogová okna
Na webových stránkách je zcela běžné vidět modální okna a všechna se používají pro různé úkoly. Ve skutečnosti se jedná o poměrně výkonný nástroj, který vám umožní učinit rozhraní webu interaktivnějším a pohodlnějším. Modální okna lze například použít pro různé formuláře, jako je autorizační formulář, formulář zpětná vazba, objednává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í pomocí jQuery a CSS. Zvláštnost tento příklad v tom, že zde není vyžadován, tedy s výjimkou samotné knihovny jQuery.
Kód modálního okna umístíme na stránku:
zavřít
Otevřete modální okno
Jak můžete vidět z označení, blok samotného modalu 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 pod blokem je blok div s atributem id= překrytí, který zároveň slouží ke ztmavení pozadí. Modální okno se otevře odkazem s třídou modální.
Pro modální_forma nastavili jsme pevnou šířku a výšku a pak polohu vycentrovali do středu obrazovky. Pro podložení modálního okna ( překrytí) nastavíme velikost na šířku obrazovky, vyplníme průhledností a také ji ve výchozím nastavení skryjeme. 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 tomu nejzákladnějšímu, toto je kód javascriptu. Pro modální okno budou použity dvě hlavní události, jedná se o 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 kliknutím na tlačítko Zavřít, v našem případě se jedná o prvek span s id= modal_close.
S animate měníme vertikální polohu horní stejně jako transparentnost neprůhlednost a tímto dostáváme zajímavý efekt. Podobný efekt se používá jak při otevření okna, tak při jeho zavření. Rozdíl je v tom, že se změní pořadí použití vlastností pro bloky, čímž se vizualizuje otevírání a zavírání okna.
3. Příklad modálu jQuery volaného pomocí odkazu (s ukázkou)
S největší pravděpodobností jste již více než jednou na internetu viděli vyskakovací modální okno - potvrzení registrace, varování, referenční informace, nahrávání souborů a další. V tomto tutoriálu nabídnu několik příkladů, jak vytvořit nejjednodušší modální okna.
Vytvořte jednoduché modální vyskakovací okno
Začněme uvažovat o kódu nejjednoduššího modálního okna, které se okamžitě objeví kód jquery
Vložte kód kamkoli dovnitř tělo vaši stránku. Ihned po načtení stránky, bez jakýchkoli příkazů, uvidíte okno jako toto:
Následující kód se ale spustí po načtení celé stránky v prohlížeči. V našem příkladu po načtení stránky s obrázky vyskočí jednoduché vyskakovací okno:
Volání modálu jQuery z odkazu s CSS
Dalším krokem je vytvoření modální okno při kliknutí na odkaz. Pozadí bude pomalu tmavnout.
Často můžete vidět, že přihlašovací a registrační formuláře jsou umístěny v takových oknech. Pusťme se do práce
Pro začátek si napišme 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 souboru css nebo v
V kódu jQuery se zaměříme na pozici modálu a masky, v našem případě na 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
Nedílnou součástí jsou modální okna moderní web design, pomocí nich 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 pomocné stránky. V tomto tutoriálu se podíváme na to, jak vytvořit úžasná modální okna s rozmazaným pozadím pro web s pomocí jQuery a CSS3. Díky těmto pravidlům vytvoříme při zobrazení okna neostré pozadí, které bude poutat pohled návštěvníka pouze na potřebné informace na stránce.
Modály rozmazaného pozadí s CSS3
Ekonomické zprávy jsou nejlepší pouze zde: Drobakha
Animace okna bude nastavena tak, že po kliknutí na tlačítko vzhledu se okno animuje shora dolů, přičemž se automaticky zvýší rozostření pozadí.
Krok 1: HTML
Budeme mít kontejner, který bude obsahovat: nadpis, popis, poté přidáme třídu pro tlačítko s třídou toggleModal pro otevření modálního okna:
záhlaví
Popis
Název okna
Karty jsou velmi zajímavou a pohodlnou věcí při vytváření webu, umožňují vám správně organizovat informace a zároveň šetřit místo na webu.
Potom musíme přidat třídu modální je-aktivní, tato třída bude zodpovědná za volání modálního okna, modální_hlavička je zodpovědný za nadpis a jeho styling okna.
Krok 2: CSS
Nyní přejdeme ke stylování, prvním krokem je třída knoflík, která bude zodpovědná, uhodli jste, za tlačítka na webu, nastavili jsme pro něj správné parametry zobrazení:
Styly jsou poměrně jednoduché, jsou uloženy v samostatném souboru a neměly by způsobit potíže při jejich úpravě vývojáři, který se někdy setkal s CSS.
Krok 3JS
Naší poslední, ale neméně důležitou, bude instalace automatického rozostření pozadí při zobrazení menu a také klikatelnost odkazů, k tomu nám pomohou 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 návštěvníka a nezatěžují váš design.
1. Modální okno na jQuery "Simple Modal Box"
2. plugin jQuery "LeanModal"
Zobrazení 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 ve dvou verzích. V jednom případě zprávy zmizí samy o sobě, po určité době, ve druhé implementaci, abyste mohli zprávu zavřít, musíte kliknout na tlačítko.
4. Obsah, který se objeví v modálním okně
Odhalit plugin. Chcete-li vidět plugin v akci, klikněte na tlačítko "Fire A Reveal Modal" na stránce ukázky.
5. Pěkná dialogová okna
Kliknutím na křížek na ukázkové stránce uvidíte plugin v akci.
6. Modální okno Mootools, zásuvný modul MooDialog
7. Vyskakovací panel jQuery v horní části obrazovky
8. jQuery Popup
Plugin jQuery pro zobrazení kontaktního formuláře ve vyskakovacím okně.
10. Plugin MooTools "LightFace" pro implementaci dialogů na Facebooku
Dialogová okna ve stylu Facebooku. Kromě statických informací můžete do oken vkládat obrázky, snímky, požadavky Ajaxu. Mnoho nastavení pro plugin, 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 jQuery.
12. Modály jQuery
Pěkná modální vyskakovací okna. Tři styly. Ukázková stránka má 3 odkazy na okna volání.
13. Modály jQuery
Vyskakovací modální okna několika typů. Chcete-li vidět plugin v akci, klikněte na odkaz na ukázkové stránce.
15. Vyskakovací zpráva v horní části stránky
Zpráva se zobrazí v horní části stránky, která je naopak šedě. Kliknutím na štítek „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 javascriptu
Implementace moderních modálních dialogů 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" a uvidíte, jak skript funguje.
17. Plugin "Leightbox" pomocí knihovny Prototype
Plugin pro zobrazování obsahu v modálních oknech.
Když mluvíme o různých technikách vytváření stránek, bylo by absurdní nemluvit o některých způsobech vytváření modálních oken. Nebudeme mluvit o účelu, užitečnosti a vznikajících problémech používání vyskakovacích, 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, například jako a, takže stojí za to pochopit, jak si můžete vytvořit svůj vlastní.
Podívejme se, jak na to:
HTML
Začněme přidáním značek s následujícími atributy:
href - #?w=500 určuje šířku okna
rel je 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 = 500px
Viz Okno v akci - Šířka = 500px
Dále musíme vytvořit vložené označení pro vyskakovací okno. Můžete jej umístit kamkoli na stránku, například do spodní části obsahu. Všimněte si, že vyskakovací id odpovídá atributu relštítek Tím se spojí odkaz a vyskakovací okno.
záhlaví
Jakýkoli text, který se vám líbí
A tak jsme vymysleli umístění našeho okna na stránce, nyní jej ozdobíme pomocí stylů, dáme mu decentní vzhled.
Rozvržení CSS
Pro větší přehlednost jsem sepsal několik vysvětlení parametrů stylu našeho okna. Protože vyskakovací okna mohou mít různé velikosti, v CSS je neuvádíme popup_block okraje okna, vypočítat požadovanou velikost, to je právě úkol pro .
Se vznikem okna a jeho vzhled pomocí css si myslím, že nebudou žádné zvláštní potíže. Styly lze psát přímo na HTML stránku, mezi značkami
a, nebo jej můžete vložit do samostatného souboru vašich stylů, obvykle do tohoto souboru styl.css, nebo něco takového.
nastavení jquery
Pro plný provoz modálního okna je potřeba připojit jQuery, kteří nejsou obeznámeni s prací této knihovny, si můžete přečíst.
No, půjdeme dál. nejvíc můžeš Nejnovější verze jQuery z webu knihovny, nebo použijte samostatný soubor hostovaný v útrobách Google a propojte jej s dokumentem v sekci před závěrečnou značkou
umístěním tohoto řádku:
V dalším kroku zvažte náplň a funkce plugin jquery, pro aktivaci našeho vyskakovacího okna obsahuje kód některá vysvětlení pro lepší pochopení toho, co děláme.
plugin jquery
$(dokument) . připraveno(funkce()( //Při kliknutí na odkaz s třídou poplight a atributem href značky s #$("a.poplight" ) . click(function () ( var popID = $(this) . attr("rel" ) ; //získáme název okna, důležité je při přidávání nových nezapomenout změnit název v atributu rel odkazu var popURL = $(toto) . attr("href") ; // získat velikost z atributu href odkazu//požadavek a proměnné z href url varquery=popURL. rozdělit("?"); var dim= dotaz[ 1 ] . rozdělit("&"); var popWidth = dim[ 0]. split("=" ) [ 1 ] ; //hodnota řetězce prvního dotazu// Přidejte do okna tlačítko pro zavření$("#" + popID) . fadeIn() . css(( "width" : Number( popWidth) ) ) . předřadit( ""
)
;
//Definování okraje (margin) pro zarovnání na střed (vertikálně a horizontálně) - přidáme 80 k výšce/šířce s odsazením + šířkou okraje definovanou v css var popMargTop = ($("#" + popID) . height() + 80 ) / 2 ; var popMargLeft = ($("#" + popID) . width() + 80 ) / 2 ; //Nastavit velikost odsazení$("#" + popID) . css(( "margin-top" : - popMargTop, "margin-left" : - popMargLeft ) ); // Přidá poloprůhledné stínované pozadí$("tělo") . připojit(" "
)
;
//kontejner div se zapíše před značku.
$("#fade" ) . css(( "filtr" : "alpha(opacity=80)" ) ). fadeIn() ; // průsvitnost vrstvy, filtr pro hloupé IE vrátit false ; )); //Zavřete okno a ztmavte pozadí$(dokument) . on("click" , "a.close, #fade" , function () ( //zavřít kliknutím mimo okno, tzn. v pozadí...$("#fade , .popup_block" ) . fadeOut(funkce () ( $("#fade, a.close" ) . remove() ; // odeznít)); vrátit false ; )); ));
Obecně platí, že pokud se nedostanete do džungle a nebudete se zatěžovat přebytečným kódem abrakadabra, naše úžasné modální okno je připraveno k použití a čeká na vaše myšlenky přepsané do textu nebo jakéhokoli jiného užitečné informace. Pro ty, kteří by chtěli pomocí modálního okna umístit video nebo do něj velké obrázky, jsem přesto doporučil použít 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ž na přání to není problém.
Příště to určitě řeknu a ukážu na příkladu a určitě se mnozí budou zajímat o další objekty třetích stran ve vyskakovacím okně. Takže zůstaňte naladěni a zůstaňte naladěni na aktualizace!
Aktualizace: Verze dm-modal.js v1.3 (15. 1. 2017) Opraveno: Nahrazena zastaralá funkce .live() pomocí syntaxe href*=\\#. Plugin nyní funguje s aktuální verze jQuery knihovny
To je vše! Doufám, že dostanete další užitečnou lekci.
