JQUERY UI Modale Tutorial

Qualcuno può fornire un ambiente pulito esempio di come utilizzare JQUERY UI finestra di dialogo Modale. Sorprendentemente non è così semplice come si potrebbe pensare.

Obiettivo:

  1. facendo clic su un elemento carichi modale

  2. Modale viene visualizzato “Caricamento…” E poi fa una chiamata ajax per ottenere il contenuto di modale

  3. Modale può essere chiusa cliccando un vicino btn o premendo il tasto esc

  4. Modale può essere repopened, e quando è stato riaperto non mostra lo stato della precedente modali.

Grazie!

Qui è quello che ho attualmente sto facendo, ma funziona molto impacciato e non sembra affatto come una soluzione intelligente. Idee?

var $dialog = $('<div id="sharerdialog"></div>')
.html('<p>Loading...</p>')
.dialog({
    autoOpen: false,
    title: 'Share the item',
    position: ['center',150],
    width: 450,
    focus:function(event, ui) {
        $('#dialogcloser').click(function() {
            $dialog.dialog('close');
        });
    }, 
    open: function(event, ui) {
        var title2use = document.title;
        title2use = escape(title2use);          
        $("#sharerdialog").load("/items/ajax/share/index_beta.cfm?itemid=#itemID#&itemtitle=" + title2use);
    }
});
//Bind the Share btn to Open the Modal
$('#itemshare').click(function() {
    $dialog.dialog('open');
});
  • Con piacere. Ci mostrano quello che hai provato fino ad ora jsbin.com e siamo in grado di riempire gli spazi vuoti o correggere gli errori.
  • buona idea… ho aggiornato la domanda con il mio attuale JS. Grazie
InformationsquelleAutor AnApprentice | 2010-02-20



2 Replies
  1. 1

    Il problema principale che vedo con il tuo codice, è che non si è aggiunta la finestra di dialogo per il DOM, pertanto, il browser non visualizza. Il mio suggerimento è di provare prima:

    var $dialog = $('<div id="sharedialog"></div>')
          .html('<p>Loading....</p>')
          .appendTo('body')
          .dialog({...});

    In modo che è stato aggiunto al DOM, e il browser è in grado di visualizzare.

    • Interessante, il codice sopra funziona bene, sembra proprio reale goffo.
    • Da una UI prospettiva, si potrebbe ottenere fastidioso vedere un modale ogni volta che si effettua una richiesta. Dal momento che hai citato l’utente può chiudere, presumo che si desidera solo per dare all’utente un feedback che la risposta è in fase di caricamento. In questo caso, perché non basta semplicemente mostrare la Loading... testo (o icona), vicino al pulsante, o come top strato sopra l’area dei risultati. Utilizzare i css visibility: hidden; o display: none; e mostra/nascondi utilizzando jQuery.
    • Idea interessante.
  2. 1

    Perché così complesso?

       $(function() {
        $("#itemshare").click(function() {
            $("#sharerdialog").dialog().load("/items/ajax/share/index_beta.cfm");
            return false;
        });
       });

    È possibile catena di uo in jquery.
    E in HTML basta avere un div vuoto con l’id sharerdialog. Può stile di nascosto

    style="display: none;"

    Ma che è

Lascia un commento