februarie 5, 2021

Dialog cu jQuery

Conținut

  • 1 Codul HTML
  • 2 Codul JavaScript
  • 3 opțiuni

cu jQuery Putem face ferestre de dialog care se deschid apăsând un buton, care poate fi tras, redimensionat și Ei au butonul de închidere în colțul din dreapta sus.

Codul HTML

Mai întâi facem codul HTML pe pagina noastră. Care va fi dialogul nu este altceva decât un < div > în interiorul paginii. Putem pune-o oriunde, pentru că atunci va fi ascunsă și când este afișată „va pluti” peste restul paginii.

divid id = „785908db27″>

am pus pe capul foii de stil și jQuery necesar. Subiectul CSS este important pentru dialogul să arate ca un dialog. Vă puteți descărca pe care îl puteți afla acolo sau puteți să vă faceți propriul subiect cu ușurință cu aplicația Web Temeroller.

Am pus DIV care va fi dialogul și o pereche de butoane care ne vor servi Pentru a deschide și a închide dialogul.

codul javascript

acum putem da funcționalitatea numai folosind funcțiile JavaScript / JQuery. Pentru aceasta, am pus între etichete < scenariu >, după < corp > de exemplu

<body> <script> $(document).ready(function() { $("#dialogo").dialog({autoOpen:false}); $("#abrir").click(function(event) { // $("#dialogo").dialog('option','position',); $("#dialogo").dialog('open'); }); $("#cerrar").click(function() { $("#dialogo").dialog('close'); }); }); </script> ...

Pur și simplu spunem că atunci când documentul este încărcat, lăsați următorul:

  • $ („# dialog”). Dialogul ({AUTOUPEN: FALSE}); La elementul cu (Div) devenim dialog (dialogul de apelare). Ca parametru am trecut printr-un {Selfopen: False}, astfel încât dialogul să fie ascuns până când îl vizualizăm într-un fel. Dacă nu facem acestora, dialogul va fi vizibil de la început.
  • $ („deschis”). Faceți clic pe (funcția (eveniment) {la butonul id = Deschidere Am pus o funcție care va Fiți executați când faceți clic pe acesta. Această funcție va afișa $ Dialog $ („Dialogul #”). Dialogul (‘deschis’);
  • Am fost comentați // $ („Dialogul”). Dialogul („Opțiune”, „Poziție”,); Dacă descompunem, dialogul va fi afișat în poziția în care este clic cu mouse-ul, adică pe buton. Dacă nu, va apărea centrat.
  • $ („#close”). Faceți clic pe (Funcție () {la butonul ID = Închidere Am pus o funcție care va fi executată atunci când faceți clic pe buton. Această funcție va închide $ („Dialog $ (” # Dialog „). Dialogul (‘aproape’);
  • Mai multe opțiuni

    JQuery Dialoguri au mai multe opțiuni. Noi Poate adăuga butoane ca „acceptați”, „Anulare” sau ceea ce vrem, face posibilă sau nu trageți, redimensionați, setați dimensiunile, să faceți vizualizare sau ascundeți etc. aici Nes Toate opțiunile http://docs.jquery.com/UI/Dialog

    Lasă un răspuns

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