Jednoduché vyskakovací okno. Vytváříme vlastní pop-up okno pomocí javascriptu, css a jQuery. Jakou metodu zvolit
3. Příklad modálního okna jQuery volaného z odkazu (z Demo)
S největší pravděpodobností jste již více než jednou viděli vyskakovací modální okno na internetu - potvrzení registrace, varování, informace o pozadí, stahování souborů a mnoho dalšího. V tomto tutoriálu nabídnu několik příkladů, jak vytvořit to 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 k věci
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
Blízko
Text v modálním okně.
CSS kód. Buď dovnitř samostatný soubor css 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;
odsazení: 20px;
přepad: skrytý;
}
#boxy #dialog (
šířka:375px;
výška:203px;
padding:10px;
background-color:#ffffff;
}
.top(
poloha:absolutní;
vlevo:0;
nahoře:0;
šířka:370px;
výška:30px;
pozadí: #0085cc;
výplň: 8px 20px 6px 10px;
}
.blízko(
plovák:pravý;
}
.obsah(
padding-top: 35px;
}
V kód jQuery Zaměřme se na polohu modálního okna a masky, v našem případě postupné ztmavování pozadí.
Pozor! 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(function(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("left", 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();
});
});
Hezký den všem čtenářům tohoto článku. Pokud potřebujete vytvořit vyskakovací okno pro vaši webovou službu, pak jste našli tu správnou publikaci! Dnes vám řeknu, jak vytvořit vyskakovací okno pomocí nástrojů JavaScript, css a jQuery.
Článek podrobně rozebere 3 možnosti psaní vyskakovacích oken se ztmaveným pozadím a na konci analyzuje každou metodu. Následně můžete ve svých programech použít libovolný kód z uvedených příkladů. Nyní se dáme do práce!
Ne, řekni mi, proč je to vůbec potřeba!?Ve skutečnosti se v mnoha případech používá mechanismus, jako jsou vyskakovací okna. Jako příklad můžeme uvést stejné „VKontakte“ nebo jiné sociální sítě, kde při prohlížení fotografií nebo jiných grafické soubory otevře se uživateli jako vyskakovací okno.
Dalším běžným případem použití tohoto přístupu jsou schránky se zprávami pro lidi, kteří vstupují na stránky nebo je opouštějí. Takové zprávy se objeví jednou buď při načtení stránky, nebo po kliknutí na křížek, který zavře záložku.
Jsem si také jistý, že každý z vás viděl obrázek, kde se po kliknutí na určitá tlačítka ve službě před vámi objeví okno s výzvou k registraci. Po jeho vyplnění jsou data odeslána na server pomocí např. php a následně se vám otevřou všechny možnosti služby.
Nemohu mlčet o třetím způsobu použití vyskakovacích oken. Toto je spam a reklama.
Začněme jednodušeNyní se dostáváme k samotným příkladům. Začnu s implementace softwaru, vytvořené pomocí css a html. Napsal jsem aplikaci, ve které po kliknutí na určité tlačítko vyskočí okno. Vložil jsem do něj obrázek. Můžete tam však vložit jakékoli informace, ať už jde o odkazy, text, fotografie, videa, registrační formuláře a podobně.
Takže se to samo vejde do pár řádků, protože veškerá šťáva spočívá ve správném stylingu.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | Popup okno Klikněte na mě 
|
Popup okno Klikněte na mě
Jak vidíte, vše je velmi jednoduché. A teď přejdu k kaskádové tabulky. Bude tam spousta kódu, ale opět je to snadné.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
/*Dim display*/ .overlay ( background-color: rgba(1, 0, 0, 0.77); right: 0; left: 0; position: fixed; top: 0; bottom: 0; z-index: 11; display: none ) /*Vrstva se stane viditelnou*/ .overlay:target ( display: block; ) /*Roztáhnout obrázek na celou šířku vyskakovacího okna*/ .window img ( šířka: 100 %; ) /*Charakteristiky samotného okna, které se objeví po kliknutí na tlačítko*/ .window ( vlevo: 50 %; z-index: 12; okraj: 0; pozice: pevná; výplň: 15px; okraj: 1px plný #383738; pozadí: #fefeff; border-radius: 15px box-shadow: 0 13px 21px rgba(0,1,0,.19),0 21px 63px rgba(0,1,0,.31 transform: translate(-50%, -450); %); 0,6s zmírnění ) /*Zobrazí modální okno od horního okraje obrazovky*/ .overlay:target+.window ( transform: translate(-50%, 0); top: 17%; ) /; *Vzhled tlačítka „Zavřít“ */ .close ( nahoře: -11px; vpravo: -11px; šířka: 23px; výška: 23px; pozice: absolutní; odsazení: 0; ohraničení: 2px plné #ccd; border-radius: 15px; barva pozadí: rgba( 61, 61, 61, 0,81);
box-shadow: 0 0 12px #010;text-align: center; text-dekorace: žádná; písmo: 18px bezpatkové; váha písma: tučné; přechod: veškerá lehkost .9s; ) .close:before ( barva: rgba(254, 254, 254, 0,89); content: "X"; stín textu: 0 1px 3px #010; font-size: 14px; ) /*Změna charakteristik při najetí myší na area */ .close:hover ( background-color: rgba(253, 21, 0, 0.83); transform: rotation(360deg); ) /*Design hlavního tlačítka*/ #button (margin-left: 40%; font-size : 33px-poloměr: 11px barva-pozadi: rgba(63, 63, 63, 0,9): 0 3px 10px #010: žádná;
Funkce JavaScriptu
V
skriptovací jazyk
‹script› var text = potvrdit("Nějaký textový obsah. Četl jsi všechno?");
Pokud se zobrazí okno standardní pohled Můžete zadat nějaké informace, pak je to výzva.
| 1 2 3 4 5 6 7 8 9 |
var isLogIn= prompt("Jste odběratel?", ""); alert("Odpověď: "+isLogIn);
Kromě toho má okno js metodu, která vám umožní načíst nové stránky a otevřít nová okna. Tento
window.open („cesta“, „název“, „parametry“)
Tato metoda má mnoho vestavěných parametrů. Pokud je chcete rozebrat, otevřete si oficiální dokumentaci. Přejdu rovnou k jednoduchému příkladu.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | okno na js |
okno na js var PopUpW = window.open("", "PopUp Window", "resizable=no,scrollbars=no,width=350,height=150,copyhistory=1");
PopUpW.document.write("Spousta a spousta textového obsahu!");
Díky tomuto kódu se vyskakovací okno objeví ihned po načtení stránky. Upozorňujeme, že parametry musí být uvedeny oddělené čárkami a bez mezer.Práce s jQuery
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | No a dostali jsme se ke knihovně js - jQuery. Pro implementaci popsaného přístupu jsem v jq napsal dvě funkce, které jsou zodpovědné za vzhled okna a za jeho zavírání. |
Klikněte na odkaz X Nějaký návrh!
/*otevře vyskakovací okno*/ $(document).ready(function() ( $("a#start").click(function(event)( event.preventDefault(); $("#overlay").fadeIn( 250 , function())( $("#popUp") .css("zobrazit", "blok") .animate((neprůhlednost: 1, nahoře: "55%"), 490; /* )); kliknutím na křížek zavřu okno*/ $("#close, #overlay").click(function())( $("#popUp") .animate((opacity: 0, top: "35%") , 490, function())( $(this).css("zobrazit", "none"); $("#overlay").fadeOut(220; ));#popUp ( nahoře: 12%; vlevo: 50%; výška: 200px; pozice: pevná; šířka: 300px; border-radius: 11px; pozadí: #fef; margin-left: -150px; margin-top: -100px; zobrazení: žádné; krytí: 17px; z-index: 6; ) #popUp (kurzor: ukazatel; pozice: absolutní; šířka: 23px; nahoře: 17px; zobrazení: blok; ) # overlay ( z-index:4; background-color:#010; position:fixed; opacity:0.86; width:100%; height:100%; display:none; top:0; left:0; ) Klikněte na odkaz X Nějaký návrh!
Takže experimentujte, naučte se nové způsoby, jak to implementovat, a nezapomeňte se přihlásit k odběru mého blogu. Vždy jsem rád, že mám nové odběratele! Uvidíme se! čau čau!
S pozdravem Roman Chueshov
Přečteno: 721x
Které byly zmíněny výše.
Když už mluvíme o výhodách, můžeme zdůraznit několik klíčových:
- Snadno přizpůsobitelné vzhled(v archivu najdete 2 témata: výchozí a bootstrap);
- Krásně zobrazená upozornění podobná Growl po reakci na upozornění, která lze použít jako zpětnou vazbu pro uživatele;
- Používá pouze možnosti JavaScriptu a nevyžaduje knihovny třetích stran;
- Kompatibilita mezi prohlížeči;
- Alertify má svou vlastní úplnou dokumentaci.
Na solidní čtyřku už je zásluh dost, navíc si každý něco poznamená. Potěšily mě především mininotifikace, které se ne vždy nacházejí v hotových skriptech modálních oken. No, alertify váží docela dost. V dnešní době má téměř každá webová stránka spoustu skriptů a knihoven třetích stran, jako jsou jQuery a MooTools, což často zvyšuje zatížení stránek.
Pokud jste si při čtení úvodu ještě nestihli prohlédnout příklady, které jsem připravil, pak doporučuji si je prostudovat a vyzkoušet. Ukázková stránka jasně ukazuje, jak vyskakovací okna JavaScriptu fungují a jak snadné je používat. Nyní budeme nadále rozumět alertify a nejprve propojíme samotný plugin a jeho styly:
Skript přidáme na konec stránky:
Nyní máme nový objekt Alertify a pro zobrazení jeho obsahu doporučuji použít firebug.
Tento objekt má další dva podobjekty, které použijeme k implementaci našich modálních oken a upozornění. Hned na začátku článku jsem řekl, že tento skript je soběstačný a je tomu tak! Například nepotřebujeme psát dlouhou verzi hledání prvku podle id in strom DOM- stačí použít získat metodu(). Další dvě metody, on() a off(), obě v jQuery, dělají přesně to samé – připojují události k prvkům nebo je odstraňují.
Nyní napíšeme úvodní kus kódu, ve kterém skryjeme dlouhá volání metod a objektů:
Var d = Alertify.dialog, l = Alertify.log, $ = Alertify.get;
Takto to bude mnohem pohodlnější. Ve svých příkladech nebudu používat metodu on(), ale pro názornost použiji onclick. Přidejme HTML značení pro naše první upozornění:
Dialogové okno upozornění
Použijeme plugin:
$("alert").onclick = function())( d.alert("Textová zpráva v modálním výstražném okně"); return false; );
Chcete-li vytvořit modální okno potvrzení(), přidáme také HTML:
Potvrdit dialog
A použijeme odpovídající kód:
$("confirm").onclick = function())( d.confirm("Textová zpráva v modálním okně potvrdit", function())( // Když kliknete na "OK", function())( // Když kliknete na "Zrušit" ));
Zbývá nám prompt(), přidejte HTML:
Výzvový dialog
A já sám JavaScript kód:
$("prompt").onclick = function())( d.prompt("Textová zpráva v modálním okně výzvy", function(str)( // Když kliknete na "OK" // str - přijatá hodnota v okno), funkce ()( // Když kliknete na "Storno", "Výchozí hodnota" vrátí false;
Jak vidíte, podívali jsme se na hlavní modální okna a je nepravděpodobné, že s nimi nastanou nějaké potíže, a nyní přejděme k oznámením. Ve skutečnosti jsou oznámení implementována prostřednictvím objektu protokolu. A zde je několik možností, jak jej použít, první je obvyklá zpráva:
L.info("Pravidelná posuvná zpráva");
Zpráva o úspěchu:
L.success("Úspěšné oznámení");
O chybě:
L.error("Při vyplňování formuláře došlo k chybě");
V našem projektu jsme tedy nastavili krásná upozornění a upozornění. Naděje, toto rozhodnutí Bude to pro vás užitečné ve vaší práci a praxi, ale to je vše, co mám.
Pro mnoho uživatelů internetu vyvolává pojem „vyskakovací okno“ negativní asociace. Při pokusu o zobrazení na webu se vám před očima okamžitě „vznáší“ obrázek, jak potřebné informace Ten bastard zakrývá požadovaný kus textu. Ještě horší je, že pokud se jej pokusíte zavřít, uživatel je často zcela převeden na jiný zdroj.
To jsou vaše vyskakovací okna takový parchant?Navzdory tomu proslulost, mohou být vyskakovací okna užitečná i otravná. Zpočátku jsou jen odrůdou dialogová okna, používané v programování jako prvky uživatelského rozhraní.
Slouží pro informaci a jako prostředek dialogu mezi uživatelem a programem (webovou aplikací). Ale bohužel takový negativní postoj mnoha uživatelů k vyskakovacím oknům je do značné míry oprávněný, protože na internetu se používají hlavně pro reklamní účely.
- Otevírání zapnuto popředí(pop-up) - vyskakovací nahoře nad hlavním;
- Otevírání na pozadí (pop-under) – otevírá se za hlavním oknem.
Ty poslední jsou nejzákeřnější. Aktivními a viditelnými pro uživatele se stanou až po uzavření hlavního. Nebude tedy možné určit jejich zdroj a včas je zablokovat.
Prostředky bojeVzhledem k rozšířenému používání vyskakovacích oken pro nechtěná reklama na internetu je mnoho vývojářů software začaly do svých produktů zabudovávat protiopatření.
Hlavním programem pro používání internetu je prohlížeč. Proto je hlavním způsobem blokování akce reklamní okna implementováno přesně v prohlížeči:
- Internet Explorer - stal se posledním ze všech softwarových produktů, která implementovala možnost blokovat vyskakovací reklamy. Stalo se tak až v roce 2004;
- Opera – tento produkt byl prvním prohlížečem na světě s vestavěným blokováním vyskakovacích oken. Vyskakovací okna v Opeře lze blokovat od roku 2000;
- Mozilla Firefox – Tento prohlížeč vylepšil přístup k potírání reklamy, který byl implementován v Opeře. Naproti tomu v Mozille nejsou blokovány všechny vyskakovací reklamy, ale pouze ty, které se načtou při otevření hlavního okna.
V moderních prohlížečích je systém blokování vyskakovacích oken konfigurován prostřednictvím uživatelské rozhraní. Chrome, stejně jako většina ostatních prohlížečů, má schopnost povolit nebo zakázat blokování a také vytvořit seznam výjimek (důvěryhodné weby):
Ve webovém programování se k vytváření vyskakovacích oken používá několik technologií. Hlavním prostředkem jejich vytváření je stále javascript. Jeho funkčnost zahrnuje několik typů dialogů, jejichž akce je podobná akci vyskakovacích oken:
- Metoda alert() zobrazuje obvyklé textovou zprávu. Chcete-li dialog po přečtení skrýt, musíte kliknout na tlačítko „OK“ ve spodní části okna;
- Metoda potvrdit() je podobná na předchozí metodu. Dialog, který zobrazí, je však kromě „OK“ vybaven také tlačítkem „Storno“. S jejich pomocí může uživatel přijmout nebo odmítnout podmínku uvedenou v okně;
- Metoda prompt() se používá k volání jiného typu vyskakovacího okna javascriptová okna. Na rozdíl od výše zmíněných je toto okno také vybaveno textové pole. Uživatel do něj může zadávat textové údaje, které lze přiřadit k hodnotě požadované proměnné.
Akce všech tří metod a typy dialogů, které volají, jsou znázorněny na obrázku:
Ale to jsou jen typy dialogů. Chcete-li vytvořit skutečné vyskakovací okno v javascriptu, použijte otevřená metoda() objektu okna.
Zde úplná syntaxe metoda:
výhra = okno. open (url, name, params) , kde:
- url je adresa stránky, která se otevře v novém okně;
- Název – název vytvořeného okna. Lze použít pro další zpracování ve formulářích (cílový parametr);
- Parametry – řetězec parametrů pro nové okno. Jejich úplný seznam To zjistíte sami z dokumentace javascriptu.
Obrázek níže ukazuje metodu v akci a poskytuje zjednodušený vyskakovací skript:
Je vytvořena funkce f1, jejíž tělo implementuje volání okna. OTEVŘENO() . Pak probíhá hovor tato metoda s jedním parametrem udávajícím adresu stránky, která se otevře ve vytvořeném okně. Poté se zavolá metoda setTimeout(). Jako parametry se jí předává funkce f1 a časový interval, po kterém se otevře nové okno.
Vytvoření vyskakovacího okna s pomocí CSSMůžete také vytvořit vyskakovací okno v CSS. Tato funkce byla realizována až s vydáním třetí verze této technologie. Tuto možnost byste neměli přehánět, protože bude fungovat pouze v nejnovějších verzích prohlížečů:
Jak je vidět z obrázku, takové modální okno bylo vytvořeno pomocí CSS a html. Na rozdíl od těch vytvořených pomocí js nelze toto vyskakovací okno přesouvat po stránce. Jeho kód je navíc příliš těžkopádný na to, aby se dal popsat v rozsahu tohoto článku. Takové okno ale prohlížeč nezablokuje.
Recenze dalších technologiíVyskakovací okno není vůbec nutné vyvíjet sami. V dnešní době je pro to vytvořeno mnoho bezplatné pluginy na jquery. Spojením jednoho z nich získáte hotové okno.
Existuje také mnoho pluginů pro populární CMS. Mohou zahrnovat celou sadu oken. Design a funkčnost každého z nich je „šitá na míru“ pro provedení konkrétního úkolu (registrace, odeslání zprávy atd.).
Existuje také několik populárních skriptů. Příklad jednoho z nich bude uveden níže. Vyskakovací okna v Kontaktu a dalších oblíbených sociálních sítích fungují na tomto principu:
Jak vytvořit vyskakovací okno v Jquery $(document).ready(function())( PopUpHide(); )); function PopUpShow())( $("#window-popup").show(); ) function PopUpHide())( $("#window-popup")).hide(); ) .box ( šířka: 400px; výška : 300px ; barva-pozadi: #ccc; barva: #fff; skryté; pozice: fixní: 0px; 0px 0px 10px #000;
Zobrazit vyskakovací okno Gratulujeme, vytvořili jste vyskakovací okno!!! Skrýt vyskakovací okno
Kód je uveden ve verzi „pro líné“. Vložením do libovolného editoru a spuštěním získáte hotový příklad vyskakovací okno založené na jquery.
Nám všem, co bloudíme přes rozlohy globální síť Narazil jsem na stránky, které se po načtení okamžitě nebo se zpožděním několika sekund objevily s jiným obsahem, ať už to byla jen reklama, reklama na produkt, formulář předplatného nebo formulář zpětná vazba.
K takovým způsobům prezentace informací můžete mít různé postoje. Například všechna tato vyskakovací okna, která se objeví při návštěvě webu, jsou mírně řečeno otravná, ale cokoli, jen mě rozzuří, chci okamžitě odejít, opustit tento web, což je to, co dělám ve většině případy. To je vše moderní prohlížeče Jsou podezřelí ze všech druhů vyskakovacích oken v počáteční fázi načítání webu, jednoduše je zablokují. Ale jak vidíme, mnoho a mnoho webmasterů implementuje právě takový rušivý způsob prezentace informací.
Mě to zajímalo víc technickou stránku problém a způsoby jeho řešení. Nemusel jsem vymýšlet nic zvláštního; všechno bylo vymyšleno už dávno a funguje skvěle. Dnes spolu s vámi podrobně rozebereme nejjednodušší způsob, jak implementovat vyskakovací okno při načítání webu, s využitím kouzla nových vlastností a velmi málo k tomu, abychom uklidnili ostražitost prohlížečů a měli kontrolu nad časem, kdy se informační blok objeví .
Pro začátek, aniž byste opustili pokladnu, se můžete podívat na speciálně připravenou demo stránku konečný výsledek vše, co s vámi uděláme. V příkladu jsem ve vyskakovacím okně pro názornost použil text a pár obrázků. Do modálního okna si později budete moci vložit cokoli chcete, hlavní je to nepřehánět)))).
HTML značeníRozložení našeho vyskakovacího okna je velmi jednoduché. Potřebujeme jen dva blokový prvek div s identifikátory id, pro vazbu na javascript a vytvoření vzhledu pomocí CSS styly. Prvek je zodpovědný za umístění, barvu pozadí, průhlednost a stupeň jeho ztmavení při spuštění vyskakovacího okna. Obsah modálního okna bude umístěn uvnitř kontejneru. Musíme také poskytnout odkaz pro zavření okna. Pro jasný příklad Umístíme jednoduchý nadpis a pár odstavců textového obsahu. Nakonec dostaneme plné označení Naše okno vypadá asi takto:
Modální okno! 
|
Modální okno!
Šířka modálního okna se nastavuje v procentech v závislosti na šířce nadřazeného kontejneru v v tomto příkladu Toto je stmívání pozadí.
Je možné použít vestavěné miniatury umístěné vlevo nebo vpravo v samostatném kontejneru div s vyhrazenou třídou .pl-left a .pl-right.
Velikost bloku náhledů byla také určena v procentech (25 %), čímž byla poskytnuta možnost proporcionální změny při prohlížení na obrazovkách různých uživatelských zařízení.
Nejjednodušší animace vzhledu změnou vlastnosti průhlednosti (průhlednosti) z 0 na 1
Aby se okno neobjevilo hned po načtení stránky, ale s několikasekundovým zpožděním, použijeme malý javascript a s jeho pomocí budeme moci upravit čas, kdy se vyskakovací okno objeví. Všechny prohlížeče na tuto situaci klidně zareagují a nebudou blokovat práci skriptu, a tedy ani samotný vzhled vyskakovacího okna. Vložte toto javascript je lepší jen na konci těla html stránky před závěrečnou značkou. Samotný skript se skládá z několika řádků:
| < script type= "text/javascript" >var delay_popup = 5000 ; |
setTimeout("document.getElementById("overlay").style.display="block"" , delay_popup) ;
var delay_popup = 5000;
setTimeout("document.getElementById("overlay").style.display="block"", delay_popup); V příkladu je doba zobrazení okna nastavena na 5000, což odpovídá přibližně 5 sekundám, můžete zadat jakoukoli jinou hodnotu. K zavření okna jednoduše použijeme standardní tlačítko, tag s událostí onclick a
| < button class = "close" title= "určitá třída" onclick= "document.getElementById("overlay").style.display="none";" > |
class="close", pro možnost stylizovat vzhled pomocí stylů CSS.
BlízkoTím se dostáváme k nejzajímavějšímu momentu (podle mého názoru), vytváření stylů vyskakovacích oken.< script type= "text/javascript" src= "js/jquery.cookie.js" >
CSS styly Nejprve si vytvoříme #overlay identifikátor, se kterým propojíme naše okno s javascriptem a vytvoříme základní kontejner jQuery connect from bottomless úložiště Google, nebo si můžete stáhnout z webu
pluginy jQuery a umístěte jej na svůj web do složky „js“ (například). Dále připojte
| < script type= "text/javascript" >$(function () ( // Zkontrolujte záznam o návštěvě v souborech cookie // Pokud existuje záznam, nic se nestane, pokud (! $. cookie("hideModal") ) ( // pokud není soubor cookie nastaven, zobrazí se okno se objeví // se zpožděním 5 sekund var delay_popup = 5000 ; setTimeout("document.getElementById("parent_popup").style.display="block"" , delay_popup) ; Doba uložení souboru cookie ve dnech vyprší: 7, cesta: "/" ) ); |
$(function() ( // Zkontrolujte záznam cookie o návštěvě // Pokud existuje záznam, nic se nestane, pokud (!$.cookie("hideModal")) ( // pokud soubor cookie není nastaven, zobrazí se okno objeví se // se zpožděním 5 sekund var delay_popup = 5000 setTimeout("document.getElementById("parent_popup").style.display="block"", delay_popup ) $.cookie("hideModal", true, ( //); Doba uložení souboru cookie ve dnech vyprší: 7, cesta: "/" ));
Spustitelný soubor js je nejlépe umístit před uzavírací značku. V tomto příkladu jsem ukázal možnost ukládání cookies po zavření vyskakovacího okna na sedm dní to znamená, že se okno uživateli zobrazí při první návštěvě, a to jednou. Během následujících sedmi dnů, nebo dokud uživatel nevymaže soubory cookie prohlížeče, se okno nezobrazí.
Jak víte, obslužnou rutinu události zápisu cookie můžete svázat s jakýmkoli jiným prvkem. Nastavte dobu uložení cookie na expires: 7 (v příkladu je to 7 dní). Zpoždění vzhledu okna upravíte ve funkci setTimeout; standardně je nastaveno na 5000, tj. okno vyskočí 5 sekund po načtení stránky.
Takže jsem trochu změnil vzhled modálního okna, podělal jsem to jednoduchá animace vzhledu, změnou vlastnosti průhlednosti (neprůhlednosti) z 0 na 1. Do dema jsem přidal i volbu pro vyskakovací okno se záznamem cookie při prohlížení, nezapomeňte, že okno v této volbě se objeví jednou za každý 7 dní, takže vymažte soubory cookie) )).
Ohledně designu:
Příklady tvorby modálních oken, sypaných pro v poslední době na, tak se podívejte, vyberte si styl, který se vám líbí a vytvářejte, tvořte...
Teď doufám v jistotu – to je ono!
S pozdravem Andrey
