Cum se creează ferestre pop-up modale? / Bootstrap & jQuery & CSS

Pop-up-urile modale sunt adesea folosite pe web pentru inițierea înscrierilor la newsletter, demonstrarea notificărilor / alertelor și controlul formularelor de înregistrare și autentificare.

Puteți utiliza diverse moduri de a crea ferestre pop-up modale utilizând HTML , CSS și JavaScript . Prin urmare, acum veți învăța în mod specific pas cu pas despre Bootstrap Modal Popup , jQuery Modal Popup și CSS Modal Popup .

Apoi, vă voi oferi în sfârșit un mod foarte simplu și ușor de acționat de a crea și implementa ferestre pop-up. Cu toate acestea, ar trebui să aflați mai întâi de ce sunt utilizate popup-urile modale și de ce sunt atât de importante .

Ce este Modal Popup?

O fereastră popup sau o casetă de dialog vă ajută să afișați ultima pagină web actualizată. Avantajul unei ferestre pop-up modale este afișarea informațiilor adăugate și neîncărcarea paginii din nou. Este important pentru o experiență mai bună a utilizatorului, deoarece oferă utilizatorilor posibilitatea de a vizualiza informații relevante în caseta pop-up de pe o pagină web similară.

Modalitățile rămân tăcute până când sunt declanșate și sunt, în general, utilizate pentru a se concentra pe utilizator pe un singur apel pentru a fi activ sau pentru a sublinia informații, cum ar fi formulare de înscriere și alertă.

Există multe locuri în care sunt implicate ferestrele popup modale:

• Formulare de cerere / contact

• Formulare de generare / înscriere de clienți potențiali

• Formulare de autentificare / înregistrare

• Căutați formulare

• Alerte / notificări

• Ajutor / sfaturi

• Afișarea imaginilor și videoclipurilor pe ecran complet

Puteți crea ferestre pop-up în jurul obiectivelor dvs. De exemplu, Alpma permite utilizatorilor să se conecteze oriunde pe site.

Deși ferestrele pop-up au o reputație proastă în ceea ce privește utilizarea lor, atunci când le utilizați corect, puteți beneficia de acestea pentru:

• creșteți gradul de utilizare a site-ului web.
• micșorați timpul de încărcare.
• clarifica toate desenele.

După ce am aflat de ce sunt atât de importante ferestrele popup modale, acum putem afla cum să le creăm.

Bootstrap Modal Popup

După cum ați citit mai sus, ferestrele pop-up modale îi ajută pe utilizatori, astfel încât să poată lua măsuri înainte de a se muta în altă parte. Uneori poate fi folosit pentru a alerta utilizatorii sau pentru a lua informații.

Pluginul modal Bootstrap vă ajută să creați ferestre popup sau casete de dialog foarte utile și funcționale. Puteți verifica exemplul de mai jos pentru a înțelege cum vă puteți crea propriul popup modal cu un antet, subsol și corpul mesajului.

 <pre class="tCont active hljs javascript"><div id=<span class="hljs-string">"myModal"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"modal fade"</span>> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-dialog"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-content"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-header"</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close"</span> <span class="hljs-attr">data-dismiss</span>=<span class="hljs-string">"modal"</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>×<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"><<span class="hljs-name">h4</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-title"</span>></span>Confirmation<span class="hljs-tag"></<span class="hljs-name">h4</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-body"</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Do you want to save changes you made to document before closing?<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-warning"</span>></span><span class="hljs-tag"><<span class="hljs-name">small</span>></span>If you don't save, your changes will be lost.<span class="hljs-tag"></<span class="hljs-name">small</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-footer"</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-default"</span> <span class="hljs-attr">data-dismiss</span>=<span class="hljs-string">"modal"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>Save changes<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span> <<span class="hljs-regexp">/div></span>

Când „modelul de obiect document” este încărcat prin JavaScript, fereastra se va deschide automat.

jQuery Modal Popup

Casetele de dialog modale jQuery sunt un mod excelent de a demonstra rapid informațiile. Dacă vă pregătiți corect în timp ce creați casete de dialog modale jQuery, vă puteți avertiza utilizatorii sau puteți afișa erori cu site-urile interesante. (Din cauza modului contemporan!)

Să vedem exemplul jQuery!

 <script ></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button>

După aceasta, puteți vedea următoarele:

CSS Modal Popup

CSS este un limbaj care descrie modul în care elementele HTML trebuie afișate pe ecran. Prin urmare, ne uităm mai întâi la HTML, apoi examinăm CSS.

 <div class="container"> <div class="interior"> <a class="btn" href="#open-modal"><i class="fas fa-external-link-alt"></i> Basic CSS-Only Modal</a> </div> </div> <div class="modal-window"> <div> <a href="#" title="Close" class="modal-close">Close</a> <h1>Hello!</h1> <div>A CSS-only modal based on the :target pseudo-class. Hope you find it helpful.</div> </div> </div>

Apoi, adăugați CSS!

 .modal-window { position: fixed; background-color: rgba(255, 255, 255, 0.25); top: 0; right: 0; bottom: 0; left: 0; z-index: 999; opacity: 0; pointer-events: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; &:target { opacity: 1; pointer-events: auto; } &>div { width: 400px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2em; background: #ffffff; color: #333333; } header { font-weight: bold; } h1 { font-size: 150%; margin: 0 0 15px; color: #333333; } } .modal-close { color: #aaa; line-height: 50px; font-size: 80%; position: absolute; right: 0; text-align: center; top: 0; width: 70px; text-decoration: none; &:hover { color: #000; } } /* Demo Styles */ html, body { height: 100%; } body { font: 600 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; background-color: #f69d75; color: #555555 } a { color: inherit; } .container { display: grid; justify-content: center; align-items: center; height: 100vh; } .btn { background-color: #fff; padding: 1em 1.5em; border-radius: 3px; text-decoration: none; i { padding-right: 0.3em; } }

Arată așa:

Ce recomandăm? Popupsmart: un serviciu simplu pentru creatori de ferestre pop-up

Fără îndoială, puteți crea ferestre pop-up modale în orice scop și oriunde se aplică pe pagina dvs. web. Cu toate acestea, există un mod mai funcțional și mai simplu de a crea popup-uri modale. Popupsmart inteligent, Popupsmart face totul în numele dvs. Pentru primul pas ar trebui să determinați de ce aveți nevoie de un popup. Poate fi creșterea conversiei vânzărilor, creșterea unei liste de e-mailuri, ghidarea publicului sau creșterea apelurilor telefonice. După aceea, alegându-vă obiectivele, puteți trece la următorii pași:

Designul lui Popupsmart

Există multe șabloane gata din care puteți alege. Dacă doriți să vă ghidați publicul cu o „fereastră pop-up de anunțuri”, puteți selecta următoarele:

Sau dacă doriți să măriți conversia vânzărilor cu o „fereastră de tip Promovare produs”, fereastra dvs. pop-up poate fi concepută astfel:

Afișajul Popupsmart

Puteți să vă personalizați scurt mesajul pe baza comportamentului vizitatorului pentru a crește rata de conversie, implicare și vânzări. De asemenea, Popupsmart le permite utilizatorilor să instaleze ferestre pop-up în 1 minut, care sunt compatibile cu toate platformele site-ului web.

Sistemul de integrare Popupsmart

După selectarea obiectivului dvs. de afaceri și a șabloanelor popup compatibile, le personalizați și le publicați cu sistemul ușor de utilizat al Popupsmart, fără nicio problemă tehnică.

Sper că acest articol vă ghidează despre cum să creați cu ușurință ferestre pop-up. Puteți încerca să le creați cu HTML, CSS sau JavaScript . Cu toate acestea, pentru a nu pierde timpul, pentru a pregăti cele mai atractive ferestre pop-up și cel mai important pentru a vă verifica conversiile, ar trebui să alegeți Popupsmart!

Pentru a examina amănunțit proiectele Popupsmart, ar trebui să verificați acest lucru:

Șabloane de proiectare pop-up

Mai mult, știi cum să creezi ferestre pop-up în Wordpress fără plugin? Accesați articolul aferent pentru a afla acum!

Postări de blog conexe

Sporiți-vă angajamentele de postare pe blog cu o fereastră de tip pop-up simplă. Îmbunătățiți-vă vizualizările de pe YouTube fără a deranja vizitatorii site-ului dvs. web

Multumesc pentru timpul acordat!