Fereastra pop-up din partea de jos a paginii, proiectarea și dezvoltarea site-ului

Fereastra pop-up din partea de jos a paginii, proiectarea și dezvoltarea site-ului

Orei de timp din zi 🙂

Mai întâi, faceți doar o fereastră pop-up cu o întârziere la încărcarea paginii. Un exemplu despre ceea ce putem face cu dvs. poate fi văzut mai jos.











Mai întâi, adăugați codul HTML al ferestrei noastre. Totul este simplu. Blocul principal al ferestrei însăși cu id = "msg_pop". și un buton de închidere cu clasa = "msg_close".

Făcând înainte, voi spune că puteți începe această fereastră făcând clic pe orice element - link, span, div și așa mai departe. Asta este, dacă nu este nevoie să porniți automat fereastra cu o întârziere, și anume când faceți clic pe un buton sau pe un link și așa mai departe. va fi necesar să săriți pasul cu adăugarea scriptului și, în schimb, la elementul respectiv, atunci când faceți clic pe care trebuie apelat fereastra, adăugați și un eveniment onclick.

Și, ca exemplu, vom avea un buton - intervalul obișnuit. Trebuie să luați elementul dvs. și dacă același interval și adăugați acolo evenimentul, rezultatul este ceva de genul:

Acum adăugați scriptul apelului automat de fereastră. Dacă decideți să porniți fereastra cu butonul, după cum este descris mai sus, treceți peste acest pas.

În antetul site-ului sau în subsol, nu contează prea mult, puteți adăuga aici un script atât de mic lângă fereastra în sine.

Ultimul pas este stilurile ferestrei în sine. Descrieți în detaliu la ce nu voi răspunde. Aflați CSS. Este simplu, ușor și foarte util pentru dvs. dacă vă decideți să faceți webmasteri pe cont propriu. În stiluri, totul este simplu, dacă sunteți familiarizat cu CSS.

Voi spune doar că există trei parametri de bază. Mai întâi, acestea sunt parametrii pentru blocul principal cu idi - msg_pop. Aici este afișată condiția principală: none;

Apoi, opțiunile pentru butonul de închidere sunt msg_close. Ultimul lucru este proprietățile fadeIn class și @ keyframes - pentru a crea animație.







Voi mai spune IMPORTANT! lucru. În proprietățile de animație există o opțiune animație-durată: 0.4s; și încă o altă clonă pentru crom. Acesta este timpul de animație. După cum puteți vedea, este mai mare decât timpul de întârziere a ferestrei. Dacă creșteți timpul de întârziere, va trebui să jucați cu timpul de animație și cu vizualizarea acestuia. În caz contrar, animația se va încheia înainte ca fereastra să apară.

Dacă decideți să faceți fereastra să apară doar o dată pe zi, de exemplu, sau o dată pe oră, atunci aveți nevoie de această metodă. Voi spune imediat, deja foloseste - jQuery.

Afișarea o dată pe zi se va face folosind un modul cookie. Stilurile și codul ferestrei rămân aceleași. În loc de javascript, trebuie să adăugați un script ușor diferit. Puteți vedea un exemplu despre ceea ce se întâmplă în exemplul de mai jos.





În primul rând, trebuie să conectați biblioteca - jQuery. Dacă acest lucru a fost făcut înainte sau este motorul site-ului dvs., atunci nu este necesar să faceți acest lucru. Trebuie să vă conectați în antet sau în subsolul site-ului.

Apoi conectăm fișierul responsabil pentru formarea cookie-urilor. Trebuie să descărcați acest fișier - jquery.cookie.js

Trebuie să conectați fișierul cookie după bibliotecă specificând calea către dosarul în care ați plasat-o, dacă este în același director ca și fișierul cu html, apoi numele său.

Aici, de fapt, nu prea multe setări. Despre numele claselor și claselor, cred că este de înțeles, unde, ca în cazul schimbărilor, trebuie să vă schimbați aici.

A treia linie indică timpul acțiunilor cookie-urilor. Este egal cu durata sesiunii. Dacă doriți să o schimbați, citiți articolul - O fereastră pop-up la încărcarea paginii este afișată odată cu o întârziere. Există o instrucțiune în această privință. Nu văd din nou punctul.

Asta e tot ce ai nevoie pentru a implementa a doua opțiune cu cookie-uri. Încercați, experimentați și obțineți rezultatul dorit.

Asta e tot, vă mulțumesc pentru atenția acordată. 🙂

Dacă ai putea folosi munca mea, poți susține site-ul :)

Alo trebuie doar să adăugați redarea inițială.
$ ("") .attr ('src': '123.mp3',
"volum": 0,4,
"autoplay": "autoplay"
> appendTo ("organism");
În acest cod, adăugăm fișierul audio 123.mp3 la pagina site-ului. Pentru aceasta trebuie să specificați calea și numele corect.
"volum": 0,4, - un sunet de 0,4 din volumul maxim. și "autoplay": "autoplay" - autoplay.
Acest cod trebuie adăugat la scriptul existent, funcționează astfel:
jQuery (document) .ready (funcția ($) $ ("# msg_close"). faceți clic (funcția () $ .cookie ("msg_pop", "";);
$ ("# msg_pop") ascunde ();
>);
dacă ($ .cookie ("msg_pop") == null) setTimeout (funcția () $ ("# msg_pop") addClass ("fadeIn");
$ ("# msg_pop") arată ();
$ ("") .attr ('src': '123.mp3',
"volum": 0,4,
"autoplay": "autoplay"
> appendTo ("organism");

Bună dragă prietenă

Aveți extensia AdBlock sau altele asemenea. Adăugați site-ul meu pe lista albă, contribuind astfel la dezvoltarea sa. Instrucțiunea cum să dezactivați AdBlock Vreau aceeași fereastră







Trimiteți-le prietenilor: