Il modo migliore per fare popup / dialoghi con JQuery?

In precedenza ho fatto alcuni popup / windows di dialogo che ora ho l’errore di regressione in () e voglio ricodificare per usare JQuery per i dialoghi DIVs / popups /. Passare a Jquery sarà un vantaggio poiché possiamo abilitare il riposizionamento e il ridimensionamento di windows di dialogo / popup che non possiamo se il popup è solo un DIV che si posiziona sugli altri elementi.

Ora mi chiedo quale sia il modo “migliore” per far apparire i popup / dialoghi / DIV con JQuery? Preferirei non aggiungere un plug-in e includere solo il file JQuery di base. puoi dirmi come si fa?

La pagina corrente fa qualcosa come un popup ma non è riposizionabile.

Il modo in cui lo farei è creare una class .popup che contenga le caratteristiche di base del layout per il popup. Quindi aggiungi questa class a un

nascosto nella parte superiore della pagina.

Quindi, quando è necessario un popup, attacca gli attributi draggable e resizable di jQuery. Dopodiché, carica il contenuto del popup con una richiesta .get() da una pagina dedicata per i contenuti popup e poi .show() it.

Esempio

CSS

 .popup { display:none; position:absolute; // some other nice styling features } 

HTML

   ... page content ...  

Javascript

 function popup(){ // for the draggable you may want to specify the drag handle like only the title of the popup var popup = $('.popup'); popup.draggable(); popup.resizable(); $.get('/getPopup.php?action=theKindOfPopupRequested', function(data) { popup.html(data); popup.show('fast'); }); } 

fonti:

http://jqueryui.com/demos/resizable/

http://jqueryui.com/demos/draggable/

Ecco un plug-in di dialogo rudimentale:

http://jsfiddle.net/pjUUQ/

 (function($) { var dialogHTML = '
'; $.openDialog = function(opts) { // Create the DIV for dialog without inserting into DO var dialog = $(dialogHTML); dialog.appendTo('body'); // Give dialog some basic CSS dialog.css({ position: 'absolute', // positioned 'z-index': Math.pow(2,32) // make it sit on top }); // Position the dialog on the screen var horizOffset = ($(window).width() - opts.width || dialog.outerWidht()) / 2; var vertOffset = ($(window).height() - opts.height || dialog.outerHeight()) / 2; dialog.css({ left: horizOffset, right: horizOffset, top: vertOffset, bottom: vertOffset }); // Return dialog object to make it chainable return dialog; }; }(jQuery)); $.openDialog({width: 200, height: 100}).append('hello world');​

Puoi certamente aggiungere molto, come gestire eventi chiave per chiudere su Esc, aggiungere una barra del titolo con i pulsanti. Ma probabilmente già sai come fare queste cose comunque.

Poche cose da notare quando si creano windows di dialogo:

  • Imposta uno z-index sufficientemente alto in modo che la finestra di dialogo sia sempre in primo piano
  • Aggiungi l’elemento della finestra di dialogo a BODY

Nella mia esperienza, le prestazioni sono migliori se la finestra di dialogo HTML non è sempre presente nella pagina. Ciò va contro il degrado aggraziato, ma più leggero è l’albero del DOM, più velocemente l’app sembra andare. Quindi è meglio aggiungere l’elemento di dialogo all’albero secondo necessità.

EDIT: nota che il mio plug-in di dialogo non si aspetta che tu abbia un codice HTML predefinito nella pagina. Evoca solo un div. Quindi, non selezionare un elemento e convertirlo in una finestra di dialogo. Invece, ne crei uno nuovo.