martie 13, 2021

Fereastra modală cu jQuery

În acest tutorial vom vedea cum să creați o fereastră modală cu jQuery care este afișată sub forma unui pop-up apăsând un buton. În cazul în care nu cunoașteți jQuery, este recomandabil să vă uitați la tutorialul de introducere în jQuery.

O fereastră modală, este o fereastră de dialog care este de obicei afișată pe ecranul de deasupra restului Conținutul, de obicei, ferestrele modale blochează accesul la restul conținutului paginii până când interacționează într-un fel. Acestea sunt folosite ca înlocuirea mesajelor de alertă alert() a oricărui browser, astfel încât să se obțină o fereastră mai omogenă și personalizabilă.

Înainte de a începe, include jQuery Pe proiectul dvs. și apoi urmați pașii pe care îl vedeți mai jos.

Versiune simplificată

Vom crea mai întâi o versiune simplă care are doar stiluri asociate. Este obișnuit ca ferestrele modale să fie afișate pe o acoperire sau o suprapunere care difuzează conținutul paginii cumva. În acest fel se presupune că utilizatorul trebuie să interacționeze cu fereastra. Acesta este motivul pentru care vom adăuga un la care vom atribui clasa .overlay.

Apoi suntem Going pentru a adăuga fereastra, care va avea clasa .modal și, de asemenea, un buton care vă permite să îl deschideți. În fereastră, va fi, de asemenea, un buton care vă permite să îl închideți:

<h1>Modal</h1><div class="overlay"></div><div class="modal"> <h2>Modal</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <button class="close">Close</button> </div><button class="open">Open</button>

Apoi, vom adăuga codul jQuery, care va consta dintr-un Acțiune care atribuie clasa .active atât la suprapunere, cât și la fereastră când facem clic pe butonul de deschidere. De asemenea, vom adăuga un altul care elimină clasa .active a ambelor elemente prin apăsarea butonului de închidere.

$(".open").on("click", function(){ $(".overlay, .modal").addClass("active");});$(".close, .overlay").on("click", function(){ $(".overlay, .modal").removeClass("active");});

a Continuare Vom defini stilurile CSS. Cea mai relevantă parte este în clasa .active care alternează vizibilitatea suprapunerii și a ferestrei prin modificarea z-index și proprietatea dvs. visibility respectiv. Opacitatea dvs. va fi, de asemenea, modificată pentru a crea o tranziție.

DIV ID = „F9956A5D07″>

și cu aceasta o versiune de bază a ferestrei noastre modale va fi gata. Puteți vedea rezultatul în funcțiune aici.

Versiune avansată

Pornind de la versiunea simplificată, vom adăuga o altă acțiune, astfel încât fereastra este, de asemenea, aproape când apăsăm cheia ESC :

$(document).keyup(function(e) { if (e.keyCode === 27) { $(".overlay, .modal").removeClass("active"); }});

Vom adăuga, de asemenea, anumite stiluri CSS, astfel încât să nu pară fereastra modală este acum 20 de ani:

și după cum puteți vedea în rezultatul final, aspectul ferestrei noastre sa îmbunătățit foarte mult. Puteți vedea rezultatul în funcțiune aici.

Avatar de edu lazaro

edu lázaro : Inginer tehnic în calcul, lucrez în prezent ca dezvoltator de web și programator video.

👋 Bună ziua! Sunt Edu, îmi place să creez lucruri și am scris acest ghid. Dacă ați fost util, cea mai mare favoare pe care ați putea să o faceți este să se compună pe Twitter 😊

Dacă doriți să cunoașteți proiectele mele, urmați-mă pe Twitter.

DIV>

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *