Trimiterea unui mesaj

E-mailul dvs



Introduceți mesajul dvs
</ textarea ></p><p> <button id = "send" >Trimite e-mail</ button ><br> </ form ><br> </ div ></p> </td> </tr></tbody></table><p>Să adăugăm două câmpuri în formular: textul mesajului și adresa de e-mail a expeditorului, precum și un buton de trimitere. După ce utilizatorul introduce e-mailul, textul mesajului și face clic pe trimite, vom verifica mai întâi corectitudinea informațiilor introduse și apoi vom folosi o solicitare Ajax pentru a trimite datele către scriptul PHP.</p> <p>Inițial, formularul este ascuns:</p> <table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"> </td><td><p>#inline (afisare: nici unul; )</p> </td> </tr></tbody></table><h3>Stiluri de formulare</h3> <p>Câteva stiluri pentru proiectarea câmpurilor de formular și câteva clase aplicate câmpurilor atunci când datele sunt introduse incorect. Când erorile sunt corectate, stilul câmpurilor devine normal:</p> <table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>41<br>42<br>43<br>44<br>45<br>46<br></p> </td><td><p>TXT ( <br>display: inline-block; <br>culoare : #676767 ; <br>latime: 420px; <br><br>margine-jos: 10px; <br><br>umplutură: 5px 9px; <br>dimensiunea fontului: 1.2em; <br>înălțimea liniei: 1,4 em; <br>} </p><p>Txtarea ( <br>afisare: bloc; <br>redimensionare: niciuna; <br>culoare : #676767 ; <br>familie de fonturi: Arial, Tahoma, sans-serif; <br>margine-jos: 10px; <br>latime: 500px; <br>înălțime: 150px; <br>chenar : 1px punctat #ccc ; <br>umplutură: 5px 9px; <br>dimensiunea fontului: 1.2em; <br>înălțimea liniei: 1,4 em; <br>} </p><p>Txt: focus, <br>.txtarea:focus( <br>stil de chenar : solid ; <br>culoare-chenar : #bababa ; <br>culoare: #444; <br>} </p><p>Input.error, <br>textarea.error( <br>culoare-chenar : #973d3d ; <br>stil de chenar : solid ; <br>fundal : #f0bebe ; <br>culoare : #a35959 ; <br>} </p><p>Input.error: focus, <br>textarea.error : focus ( <br>culoare-chenar : #973d3d ; <br>culoare : #a35959 ; <br>} </p> </td> </tr></tbody></table><p>Pentru a proiecta butonul „Trimite” vom:</p> <table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br></p> </td><td><p>#trimite ( <br>culoare : #dee5f0 ; <br>afisare: bloc; <br>cursor: pointer; <br>umplutură: 5px 11px; <br>dimensiunea fontului: 1.2em; <br>chenar : solid 1px #224983 ; <br>chenar-rază: 5px; <br>fundal: #1e4c99; <br>fundal: -webkit-gradient(liniar, stânga sus, stânga jos, de la(#2f52b7) , la(#0e3a7d) ); <br>fundal : -moz-linear-gradient(sus , #2f52b7 , #0e3a7d ) ; <br>fundal: -webkit-linear-gradient(sus , #2f52b7 , #0e3a7d ) ; <br>fundal: -o-linear-gradient(sus , #2f52b7 , #0e3a7d ) ; <br>fundal: -ms-linear-gradient(sus , #2f52b7 , #0e3a7d ); <br>fundal: gradient-liniar(sus , #2f52b7 , #0e3a7d ); <br>filtru : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#2f52b7" , endColorstr= "#0e3a7d" ) ; <br>} </p><p>#send : hover ( <br>fundal : #183d80 ; <br>fundal: -webkit-gradient(liniar, stânga sus, stânga jos, de la(#284f9d) , la(#0c2b6b) ); <br>fundal: -moz-linear-gradient(sus , #284f9d , #0c2b6b ); <br>fundal: -webkit-linear-gradient(sus , #284f9d , #0c2b6b ); <br>fundal: -o-linear-gradient(sus , #284f9d , #0c2b6b ) ; <br>fundal: -ms-linear-gradient(sus , #284f9d , #0c2b6b ); <br>fundal: gradient liniar(sus , #284f9d , #0c2b6b ); <br>filtru : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#284f9d" , endColorstr= "#0c2b6b" ) ; <br>} </p><p>#send : activ ( <br>culoare : #8c9dc0 ; <br>fundal: -webkit-gradient(liniar, stânga sus, stânga jos, de la(#0e387d) , până la(#2f55b7) ); <br>fundal: -moz-linear-gradient(sus , #0e387d , #2f55b7 ) ; <br>fundal: -webkit-linear-gradient(sus , #0e387d , #2f55b7 ) ; <br>fundal: -o-linear-gradient(sus , #0e387d , #2f55b7 ) ; <br>fundal: -ms-linear-gradient(sus , #0e387d , #2f55b7 ); <br>fundal: gradient-liniar(sus , #0e387d , #2f55b7 ); <br>filtru : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#0e387d" , endColorstr= "#2f55b7" ) ; <br>} </p> </td> </tr></tbody></table><h3>Fancybox</h3> <p>Să trecem la partea cea mai interesantă, folosind pluginul. Numim metoda .fancybox și clasa de link acționează ca un selector:</p> <table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"> </td><td><p>$(document).ready(funcție() ( <br>$(".modalbox" ) .fancybox () ; <br>$("#contact" ) .submit (funcție () ( return false ; ) ) ;</p> </td> </tr></tbody></table><p>De asemenea, anulăm acțiunea de formular standard de trimitere (trimitere), acest lucru ne va permite să folosim propria noastră cerere ajax. Când am apelat metoda, nu am folosit un singur parametru și am lăsat toate valorile implicite. Cu toate acestea, merită menționate:</p> <table><tr><td><b>Nume</b> </td> <td><b>Descriere</b> </td> </tr><tbody><tr><td><b>căptușeală</b> </td> <td>Completare la conținutul din fereastră (implicit 15px)</td> </tr><tr><td><b>marginea</b> </td> <td>Distanța de la marginile browserului la fereastră (implicit 20px)</td> </tr><tr><td><b>lăţime</b> </td> <td>Lățimea prestabilită pentru conținutul „IFRAME” și „SWF”. De asemenea, pentru obiectele „inline”, „AJAX” și „HTML” dacă „AutoSize” este setat la „false”. Poate fi numeric sau „Automat”. (Implicit 800 px)</td> </tr><tr><td><b>înălţime</b> </td> <td>Înălțimea prestabilită pentru conținutul „IFRAME” și „SWF”. De asemenea, pentru obiectele „inline”, „AJAX” și „HTML” dacă „AutoSize” este setat la „false”. Poate fi numeric sau „Automat”. (Implicit 600px)</td> </tr><tr><td><b>minWidth</b> </td> <td>Lățimea minimă a ferestrei (implicit 100 px)</td> </tr><tr><td><b>minInaltime</b> </td> <td>Înălțimea minimă a ferestrei (implicit 100 px)</td> </tr><tr><td><b>maxWidth</b> </td> <td>Lățimea maximă a ferestrei (implicit 9999 px)</td> </tr><tr><td><b>maxHeight</b> </td> <td>Înălțimea maximă a ferestrei (implicit 9999 px)</td> </tr><tr><td><b>autoSize</b> </td> <td>Dacă „adevărat”, atunci autoHeight și autoWidth sunt, de asemenea, „adevărat” (implicit adevărat)</td> </tr><tr><td><b>autoHeight</b> </td> <td>Dacă este setată la „adevărat”, înălțimea pentru conținutul „inline”, „AJAX” și „HTML” este determinată automat (implicit este fals)</td> </tr><tr><td><b>autoWidth</b> </td> <td>Dacă este setată la „adevărat”, pentru conținutul „inline”, „AJAX” și „HTML”, lățimea este determinată automat (implicit este fals)</td> </tr><tr><td><b>autoResize</b> </td> <td>Dacă este setat la „adevărat”, conținutul se va redimensiona pe măsură ce fereastra se schimbă</td> </tr><tr><td><b>autoCenter</b> </td> <td>Dacă este setat la „adevărat”, conținutul va fi centrat</td> </tr><tr><td><b>fitToView</b> </td> <td>Dacă este setată la „adevărat”, fereastra va fi ajustată la dimensiunea browserului înainte de deschidere (implicit este adevărat)</td> </tr><tr><td><b>aspectRatio</b> </td> <td>Dacă este setată la „adevărat”, atunci redimensionarea este limitată de raportul de aspect (implicit fals)</td> </tr><tr><td><b>topRatio</b> </td> <td>Poziționare verticală. Dacă este setată la 0,5, distanța până la partea de sus și de jos a ferestrei browser va fi aceeași. Dacă 0, atunci fereastra modală va fi în partea de sus (implicit 0.5)</td> </tr><tr><td><b>stângaRatio</b> </td> <td>Un parametru similar numai pentru poziționarea orizontală (implicit 0,5)</td> </tr><tr><td><b>defilare</b> </td> <td>Afișează barele de defilare. Poate fi setat la „auto”, „da”, „nu” sau „vizibil” (implicit este automat)</td> </tr><tr><td><b>wrapCSS</b> </td> <td>Clasă CSS personalizată</td> </tr><tr><td><b>săgeți</b> </td> <td>Dacă este setat la „adevărat”, butoanele de navigare vor fi afișate (Valoare implicită este adevărată)</td> </tr><tr><td><b>aproapeBtn</b> </td> <td>Dacă este setat la „adevărat”, atunci va fi afișat butonul de închidere a ferestrei (implicit este adevărat)</td> </tr><tr><td><b>closeClick</b> </td> <td>Dacă „adevărat”, atunci când dați clic pe conținut, fereastra se va închide (implicit este fals)</td> </tr><tr><td><b>următorClic</b> </td> <td>Dacă este setat la „adevărat”, atunci în galerie, când dați clic pe conținut, veți merge la următoarea imagine (False în mod implicit)</td> </tr><tr><td><b>roata mouse-ului</b> </td> <td>Dacă „adevărat”, atunci galeria poate fi derulată folosind rotița mouse-ului (implicit adevărat)</td> </tr><tr><td><b>redare automată</b> </td> <td>Dacă „adevărat”, atunci când deschideți primul element din galerie, va începe o prezentare de diapozitive (implicit este fals)</td> </tr><tr><td><b>playSpeed</b> </td> <td>Viteza de prezentare (implicit 3000 milisecunde)</td> </tr><tr><td><b>preîncărcare</b> </td> <td>Numărul de imagini în miniatură sub imaginea principală (implicit 3)</td> </tr><tr><td><b>modal</b> </td> <td>Dacă „adevărat”, navigarea și butonul de închidere vor fi dezactivate (implicit false)</td> </tr><tr><td><b>buclă</b> </td> <td>Dacă „adevărat”, atunci galeria va începe din nou după ce ajunge la sfârșit (implicit este adevărat)</td> </tr><tr><td><b>ajax</b> </td> <td>Opțiune pentru cererea ajax</td> </tr><tr><td><b>iframe</b> </td> <td>Opțiune de a gestiona iframe</td> </tr><tr><td><b>swf</b> </td> <td>Opțiune de a gestiona conținutul swf</td> </tr><tr><td><b>chei</b> </td> <td>Puteți defini taste pentru a naviga prin prezentări de diapozitive</td> </tr><tr><td><b>direcţie</b> </td> <td>Direcția de navigare</td> </tr><tr><td><b>scrollAfara</b> </td> <td>Dacă este setat la „adevărat”, scriptul va evita crearea de bare de defilare (implicit este adevărat)</td> </tr><tr><td><b>index</b> </td> <td>Ignoră indexul grupului de pornire (implicit 0)</td> </tr><tr><td><b>tip</b> </td> <td>Ignoră tipul de conținut. Tipuri acceptate: „image”, „inline”, „AJAX”, „IFRAME”, „SWF” și „HTML” (null implicit)</td> </tr><tr><td><b>href</b> </td> <td>Înlocuiește sursa de conținut cu linkul (implicit este nul)</td> </tr><tr><td><b>conţinut</b> </td> <td>Ignoră conținutul care va fi afișat (implicit este nul)</td> </tr><tr><td><b>titlu</b> </td> <td>Ignoră antetul, puteți seta orice HTML (implicit este nul)</td> </tr><tr><td><b>tpl</b> </td> <td>Un obiect care conține diverse șabloane</td> </tr><tr><td><b>openEffect/ <br>closeEffect / <br>următorulEfect/ <br>prevEfect</b> </td> <td>Efect de animație pentru acțiuni, valorile posibile sunt „fade”, „fade”, „elastic”, „elastic”</td> </tr><tr><td><b>openSpeed/ <br>closeSpeed ​​​​/ <br>următoarea viteză / <br>prevSpeed</b> </td> <td>Viteza animației (implicit 250)</td> </tr><tr><td><b>deschideEasing/ <br>closeEasing / <br>nextEasing/ <br>prevEasing</b> </td> <td>Metoda de ușurare pentru fiecare tip de tranziție (implicit este swing)</td> </tr><tr><td><b>openOpacity/ <br>closeOpacity</b> </td> <td>Dacă este setată la „adevărat”, atunci transparența se schimbă (implicit este adevărat)</td> </tr><tr><td><b>openMethod/ <br>closeMethod/ <br>nextMethod/ <br>prevMetoda</b> </td> <td>Efectul de tranziție poate lua valorile „zoomIn” / „zoomOut” / „changeIn” / „changeOut”</td> </tr><tr><td><b>mamă</b> </td> <td>Elementul părinte al containerului. Acest lucru este util pentru ASP.NET unde elementul de sus este „formularul” (implicit este corpul)</td> </tr></tbody></table> <p>Utilizarea acestor parametri este foarte simplă, să presupunem că vrem să reducem umplutura la conținutul conținutului și la înălțimea conținutului:</p> <table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br></p> </td><td><p>$(".modalbox" ) .fancybox (( <br>umplutură: 0, <br>inaltime: 100 <br>} ) ; </p> </td> </tr></tbody></table><h4>Trimiterea unui mesaj</h4> <p>Înainte de a trimite, vom verifica corectitudinea datelor introduse și corectitudinea adresei de e-mail introduse. Prin urmare, vom avea nevoie de o funcție de verificare. Vom folosi o expresie regulată:</p> <table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br></p> </td><td><p>funcția validateEmail(e-mail) ( <br>var reg = <span>/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[(1,3)\.(1,3)\.(1, 3)\.(1,3)\])|((+\.)+(2,)))$/</span>; <br>return reg.test (email) ; <br>} </p> </td> </tr></tbody></table><p>Ultimul pas este trimiterea mesajului. Urmărim evenimentul de clic pe butonul „Trimite”:</p> <table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br></p> </td><td><p>$("#send" ) .on ("click" , funcția () ( <br>var emailval = $("#email" ) .val () ; <br>var msgval = $("#msg" ) .val () ; <br>var msglen = msgval.length ; <br>var mailvalid = validateEmail(emailval) ; <br><span>// Verificați dacă adresa de e-mail este corectă</span><br>if (mailvalid == false ) ( <br>$("#email" ) .addClass ( "eroare" ); <br>} <br>else if (mailvalid == true ) ( <br>$("#email" ) .removeClass ( "eroare" ); <br>} <br><span>// Verificați lungimea mesajului</span><br>dacă (msglen< 4 ) { <br>$("#msg" ) .addClass ( "eroare" ); <br>} <br>else if (msglen >= 4 ) ( <br>$("#msg" ) .removeClass ( "eroare" ); <br>} </p> </td> </tr></tbody></table><p>Am plasat datele introduse de utilizator în primele două variabile. Determinăm lungimea mesajului (msglen) și verificăm adresa de e-mail introdusă (mailvalid). Apoi, verificăm dacă variabila mailvalid este falsă, ceea ce înseamnă că adresa de e-mail a fost introdusă incorect, iar această intrare va fi evidențiată cu roșu. Verificăm și numărul de caractere introduse în textul mesajului dacă sunt mai puțin de 4 caractere, indicăm că aceasta este o eroare (evidențiem textul introdus cu roșu). $("#contact") .serialize() , <br>succes: funcție (date) ( <br>dacă (date == „adevărat” ) ( <br>$("#contact" ) .fadeOut ( "rapid" , funcția () ( <br>$(acest).inainte( <span>"<strong>Cu succes! Mesajul tau a fost trimis :)</strong>" </span>) ; <br>setTimeout("$.fancybox.close()" , 1000 ) ; <br>} ) ; <br>} <br>} <br>} ) ; <br>} <br>} ) ; </p> <p>Dacă ambele câmpuri sunt bifate, atunci în loc de butonul „trimite” arătăm textul că mesajul este trimis. Acest lucru oferă utilizatorului confirmarea că ambele câmpuri sunt verificate și că procesul este în desfășurare.</p> <p>Acum cererea AJAX. Primul parametru de cerere este tipul de transfer de date (POST sau GET). Apoi specificăm fișierul handler (sendmessage.php). Următorul parametru este data, folosind metoda serialize pregătim datele în formulare pentru a le trimite către server.</p> <p>Dacă primim un răspuns bun de la server (generăm aceste date într-un fișier PHP), atunci vom ascunde formularul de contact și vom afișa un mesaj despre succesul trimiterii. Folosesc SetTimeout() pentru ca fereastra modală să nu se închidă imediat, ci mai degrabă la o secundă după trimiterea datelor.</p> <h4>Script PHP</h4> <p>Trimitem intrarea utilizatorului folosind JQuery către sendmessage.php. În PHP generăm aceste date din matricea POST, generăm și trimitem un mesaj. Dacă trimiterea a avut succes, returnăm true înapoi la JQuery, în caz contrar false .</p> <p>În variabila $sendto indicăm adresa de e-mail la care vor fi trimise scrisorile.</p> <table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br></p> </td><td><p>$sendto = "email@mail.ru" ; <br>$usermail = $_POST [ "email" ] ; <br>$conținut = nl2br($_POST["msg"]);</p><p>// Formarea antetului scrisorii</span><br>$subiect = <span>„Mesaj nou”</span>; <br>$headers = "De la: " . <span>strip_tags ($usermail) .</span>; <br>" <span>strip_tags ($usermail) .</span>; <br>\r\n" <span>strip_tags ($usermail) .</span>; <br>$headers .= "Răspuns la: " . <span>strip_tags ($usermail) .</span>; </p><p>"</span><br>$headers .= "Versiune MIME: 1.0 <span>"<html><body style="font-family:Arial,sans-serif;">" </span>; <br>$headers .= <span>"<h2 style="font-weight:bold;border-bottom:1px dotted #ccc;">„Tip de conținut: text/html;charset=utf-8 \r \n”</h2>strip_tags ($usermail) .</span>; <br>$headers .= <span>"<p><strong>// Formarea corpului scrisorii</strong> " </span>$msg =</p><span>strip_tags ($usermail) .</span>; <br>$headers .= <span>"<p><strong>$msg .=</strong> " </span> Mesaj nou</p><span>strip_tags ($usermail) .</span>; <br>Din:</p><p>. $usermail. "</span><br>Mesaj: <br>. $conținut. " <br>$msg .= "" ; <br>ecou "fals"; <br>} </p> </td> </tr></tbody></table></body></html> <p>Ferestrele modale sunt folosite pentru afișare <a href="https://danykom.ru/ro/dopolnitelnyi-kontent-dlya-garry-s-mod-13-kak-ubrat-rozovye-error-tekstury-v-garry-s/">continut suplimentar</a>într-un nou strat de pagină (fereastră) deasupra conținutului încărcat. Ferestrele modale mai sunt numite dialoguri modale, dialoguri pop-up, ferestre pop-up, casete de dialog sau blocuri modale. În cele mai multe cazuri, jQuery este folosit pentru a crea ferestre modale.</p> <p>În acest articol, am selectat 10 dintre cele mai bune plugin-uri jQuery pentru ferestre modale, în opinia noastră. Ne-am construit pe popularitatea acestor plugin-uri și ne-am concentrat pe ferestrele modale pentru afișarea imaginilor și a conținutului.</p> <h2>Pluginuri jQuery pentru ferestre modale</h2> <p>Ferestrele modale sunt adesea folosite pentru a afișa galerii de imagini ca prezentări de diapozitive sau <a href="https://danykom.ru/ro/kak-dozvonitsya-operatoru-kievstar-vzhivuyu-besplatnyi-li-zvonok/">Informații suplimentare</a> despre element sau o imagine mărită când faceți clic pe pictogramă.</p> <p>Pe multe site-uri web, puteți găsi, de asemenea, un formular de conectare, un formular de contact sau orice alt tip de formular care se încarcă ca o fereastră modală. O altă opțiune pentru utilizarea ferestrelor modale este încărcarea în ea <a href="https://danykom.ru/ro/gugl-igl-sputnik-zemli-onlain-google-maps-karty-google/">Google Maps</a>, astfel încât utilizatorii să poată face clic și să indice o locație de pe hartă.</p> <ol><li> <p>Likno Web Modal Windows Builder nu este doar un plugin. Aceasta este o aplicație puternică WYSIWYG (interfață vizuală cu multe opțiuni) care vă oferă posibilitatea de a crea orice fel de ferestre jQuery modale. Lucrul uimitor este că nu trebuie să știi nimic despre <a href="https://danykom.ru/ro/kak-v-mozile-otkryt-ishodnyi-kod-stranicy-kak-otkryt/">cod sursă</a>. Aplicația creează tot codul pentru tine. Deci chiar dacă ești începător sau <a href="https://danykom.ru/ro/kak-stat-professionalnym-programmistom-s-nulya-zanimaites/">programator profesionist</a> care vrea să creeze rapid multe proiecte, <span>Likno Web Modal Windows Builder</span> va satisface toate nevoile dvs.</p> </li> <li><span>fancyBox</span> <p>fancyBox este un plugin care oferă o modalitate frumoasă și elegantă de a adăuga funcționalitate de zoom pentru imagini, conținut HTML și multimedia paginilor tale web. Este construit pe baza popularului JavaScript <a href="https://danykom.ru/ro/jquery---opisanie-biblioteki-chto-takoe-jquery-gde-ispolzuetsya-i-kakie-preimushchestva-daet-razrabotch/">biblioteci jQuery</a>și ușor de instalat și configurat.</p> </li> <li><span>Popup magnific</span> <p>Magnific Popup este un plugin ușor de utilizat <a href="https://danykom.ru/ro/lightbox-galereya-opisanie-jquery-lightbox-ustanovka-fotogalerei-lightbox2/">jQuery lightbox</a>, axat pe performanță. Lui <a href="https://danykom.ru/ro/ponyatiya-kachestva-programmnogo-obespecheniya-harakteristiki-programmy/">obiectivul principal</a>– oferă ușurință în utilizare pe orice dispozitiv.</p> </li> <li><span>bPopup</span> <p>bPopup-ul are un volum mic <a href="https://danykom.ru/ro/sozdai-svoi-sobstvennyi-besplatnyi-html-slaid-shou-jquery-plagin-scale-carousel-jquery/">Pluginul jQuery</a> pentru ferestre pop-up. Nu vă permite să vă creați sau să vă stilați propriul pop-up, dar oferă toată logica, cum ar fi centrarea, suprapunerea modală, evenimentele și multe altele. Pluginul vă oferă o mulțime de opțiuni de personalizare, așa că vă va plăcea cu siguranță.</p> </li> <li><span>Twitter Bootstrap Modal</span> <p>Twitter Bootstrap modal – plugin pentru Twitter bootstrap. Este potrivit pentru a crea funcționalități modale pentru o aplicație web (de exemplu, un formular modal) și pentru a înlocui funcționalitatea de bază oferită de <a href="https://danykom.ru/ro/nehvatka-mesta-na-diske-s-windows-7-gde-skryvayutsya-vremennye-faily-i-drugie/">caracteristici standard</a> <span>JavaScript alert(), confirm() și prompt()</span>.</p> </li> <li><span>Lightview</span> <p>Lightview vă permite să creați cu ușurință ferestre pop-up frumoase folosind biblioteca JavaScript jQuery Lightview folosește HTML5 pentru a vă ajuta să oferiți cea mai bună experiență utilizatorilor oricărui browser. Vă puteți îmbunătăți automat conținutul media sau puteți crea ferestre pop-up personalizate utilizând puternicul API JavaScript.</p></li> <li><span>Pop ușor</span> <p>Pop Easy este un plugin jQuery ușor pe care fiecare dezvoltator ar trebui să-l creeze cu ușurință ferestre modale. El este concentrat pe <a href="https://danykom.ru/ro/gde-stavit-heshtegi-v-instagramm-heshtegi-v-instagramm---samyi/">elemente esentiale</a>: Adăugați o mască la pagina dvs. și deschideți o fereastră pop-up modală.</p> </li> <li><span>Cutie de culori</span> <p>Mic plugin jQuery lightbox. Acceptă manipularea fotografiilor, gruparea, prezentările de diapozitive, AJAX, conținutul inline și conținutul iframe. Afișajul este controlat prin CSS, astfel încât poate fi complet reproiectat. Funcționalitatea pluginului poate fi extinsă și cu funcții de apel invers și legate de evenimente, astfel încât nu trebuie să schimbați <a href="https://danykom.ru/ro/programma-dlya-otkrytiya-jpeg-failov-ne-raspoznan-format-ishodnyh-dannyh/">fișierele sursă</a>. Colorbox acceptă setări de la un obiect cheie/valoare și poate fi legat de orice element HTML.</p> </li> <li><span>modalPopLite</span> <p>Acesta este un plugin jQuery super-ușor și super-simplu pentru dialoguri modale. Acceptă colțurile rotunjite și fade-out. Este foarte ușor de instalat și utilizat. El nu are <a href="https://danykom.ru/ro/programma-raskroya-slozhnyh-detalei-iz-listovyh-materialov/">piese complexe</a>. Doar o casetă de dialog rapidă, ușoară, dar eficientă.</p> </li> <li><span>SimpleModal de Eric Martin</span> <p>SimpleModal este un plugin jQuery ușor, care oferă o interfață puternică pentru dezvoltarea dialogurilor modale. Gândiți-vă la el ca la un cadru de dialog modal. SimpleModal vă oferă flexibilitatea de a crea orice vă puteți imagina, protejându-vă în același timp de problemele între browsere asociate cu dezvoltarea UI.</p> </li> </ol><h2>Concluzie</h2> <p>Sperăm că toate informațiile prezentate mai sus vă vor fi utile. Vă rugăm să nu ezitați să lăsați un comentariu și să ne spuneți ce părere aveți despre aceste pluginuri sau poate utilizați un alt plugin despre care nu știm încă.</p> <p>Traducerea articolului „ <span>Top 10 plugin-uri jQuery pentru Windows Modal</span>” a fost pregătit de echipa prietenoasă de proiect.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </article> <div id="disqus_thread"> <div id="dsq-content"> <ul id="dsq-comments"> <li class="comment even thread-even depth-1" id="dsq-comment-2"> <div id="dsq-comment-header-2" class="dsq-comment-header"> <cite id="dsq-cite-2"> <span id="dsq-author-user-2">Serghei Savenkov</span> </cite> </div> <div id="dsq-comment-body-2" class="dsq-comment-body"> <div id="dsq-comment-message-2" class="dsq-comment-message"> <p>un fel de recenzie „scurtă”... de parcă s-ar grăbi undeva</p> </div> </div> </li> </ul> </div> </div> </div> </div> <div class="wpb_column vc_column_container td-pb-span4"> <div class="vc_column-inner "> <div class="wpb_wrapper"> <div class="wpb_widgetised_column wpb_content_element"> <div class="wpb_wrapper"> <div class="td-a-rec td-a-rec-id-sidebar td-rec-hide-on-p "> <div id="adriver_banner_1494422254"></div> </div> <div class="td-a-rec td-a-rec-id-custom_ad_1 td-rec-hide-on-p "> <div> </div> <div id='div-gpt-ad-1491821174306-2' style='height:600px; width:300px;'> </div> </div> <div class="td-a-rec td-a-rec-id-custom_ad_2 td-rec-hide-on-p "> <div> </div> <div id='div-gpt-ad-1491821174306-3' style='height:600px; width:300px;'> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="td-footer-wrapper td-footer-template-14"> <div class="td-container td-footer-bottom-full"> <div class="td-pb-row"> <div class="td-pb-span3"> <aside class="footer-logo-wrap"><a href="https://danykom.ru/ro/"><img class="td-retina-data" src="/uploads/logo.png" data-retina="/wp-content/uploads/2017/02/logo_544x180_bw.png" alt="Tehnică. Ştiri. Telefoane. Laptop-uri. Comparaţie. Windows" title="Tehnică. Ştiri. Telefoane. Laptop-uri. Comparaţie. Windows"/ loading=lazy loading=lazy></a></aside> </div> <div class="td-pb-span5"> <aside class="footer-text-wrap"> <div class="block-title"><span>Informații generale</span></div>.</aside> </div> <div class="td-pb-span4"> <aside class="footer-social-wrap td-social-style-2"> <div class="block-title"><span>Site de rețea socială</span></div> <span class="td-social-icon-wrap"> <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://danykom.ru/jquery-krasivye-okna-sozda-m-adaptivnoe-modalnoe-okno/" title="Facebook"> <i class="td-icon-font td-icon-facebook"></i> </a> </span> <span class="td-social-icon-wrap"> <a target="_blank" href="" title="Instagram"> <i class="td-icon-font td-icon-instagram"></i> </a> </span> <span class="td-social-icon-wrap"> <a target="_blank" href="" title="RSS"> <i class="td-icon-font td-icon-rss"></i> </a> </span></aside> </div> </div> </div> </div> <div class="td-sub-footer-container"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span7 td-sub-footer-menu"> <div class="menu-td-demo-footer-menu-container"> <ul id="menu-td-demo-footer-menu" class="td-subfooter-menu"> </ul> </div> </div> <div class="td-pb-span5 td-sub-footer-copy">2024 Tehnologie. Ştiri. Telefoane. Laptop-uri. Comparaţie. Windows</div> </div> </div> </div> </div> <link rel='stylesheet' id='css-5-css' href='/wp-content/mmr/ffba0e2b-1516146715.min.css' type='text/css' media='all' /> <script type='text/javascript' src='https://danykom.ru/wp-content/mmr/4ab436a1-1516146715.min.js'></script> <script> (function() { var html_jquery_obj = jQuery('html'); if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) { var path = '/wp-content/themes/Newspaper/style.css'; jQuery.get(path, function(data) { var str_split_separator = '#td_css_split_separator'; var arr_splits = data.split(str_split_separator); var arr_length = arr_splits.length; if (arr_length > 1) { var dir_path = '/wp-content/themes/Newspaper'; var splited_css = ''; for (var i = 0; i < arr_length; i++) { if (i > 0) { arr_splits[i] = str_split_separator + ' ' + arr_splits[i]; } //jQuery('head').append('<style>' + arr_splits[i] + '</style>'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) { return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm, ''); }); splited_css += "<style>" + formated_str + "</style>"; } var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) { td_theme_css.after(splited_css); } } }); } })(); </script> </body> </html>