La finestra di dialogo dell'interfaccia utente jQuery non si apre una seconda volta

Question

Sto utilizzando jqueryui per una finestra di dialogo. Cliccando sul link "Clicca per un modale" la prima volta funziona. Quando si preme il tasto ESC, la finestra di dialogo scompare. Ma i clic successivi non funzionano. Voglio che anche quelli funzionino. L'aggiornamento della pagina rende tutto OK.

HTML:

<a href="" class="click_me" style="font-size:15px;"> Click for a modal</a><br /> 

<div class="demo" "> 

<div id="dialog" title="&nbsp;&nbsp;&nbsp;Upload Your Profile Picture" style="border1111:1px solid red; width:640px;"> 

     this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is 


</div><!-- end of id dialog --> 
</div><!-- End demo --> 

jQuery frammento:

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function() { 

    $(".click_me").bind('click', function (e) { 
     e.preventDefault(); 
     $("#dialog").css('border', '5px solid #848484'); 
     $("#dialog").dialog({ 
      width: 460 
     }); 
     //$("#dialog").dialog("option", "height", 180); 
    }); 

    $("body").bind("keyup#dialog", function (event) { 
     // 27 == "esc" 
     if (event.which == 27) { 
      // TODO: close the dialog 
      // unbind the event 
      $("body").unbind("keyup.myDialog"); 
     } 
    }); 

}); 
</script> 

Come posso fare più clic lavorare?

Answer 1

quattro cose.

primo luogo, se la finestra di dialogo dovrebbe essere riutilizzabile, ti consigliamo di crearla prima al primo scatto e impostare l'opzione autoOpen-false. Per aprire la finestra di dialogo, è necessario utilizzare dialog('open').

Ad esempio:

$(document).ready(function() { 

    var dialog = $('#dialog'); 

    dialog.dialog({    // <-- create the dialog 
     width: 460, 
     autoOpen: false 
    }); 

    $(".click_me").bind('click', function (e) { 
     e.preventDefault(); 
     dialog.dialog('open'); // <-- open the dialog 
    }); 
}); 

Nota che creo un var dialog per salvare $('#dialog'). Questo è più efficiente, perché altrimenti, jQuery dovrebbe cercare #dialog più volte in un pezzo di codice.

In secondo luogo, c'è un errore nel codice HTML: c'è una citazione di troppo qui:

<div class="demo" "> 

Questo potrebbe causare un comportamento imprevisto in alcuni browser (ma non tutti), il che rende difficile il debug. Rimuovi la citazione extra.

In terzo luogo, se ricordo correttamente, jQuery UI Dialog gestisce già la chiave ESC, quindi non è necessario farlo da soli. Se vuoi fare qualcosa di diverso da chiudere la finestra di dialogo quando exscape viene premuto, dovresti effettivamente utilizzare l'evento beforeClose della finestra di dialogo. Se tutto quello che vuoi fare è chiudere la finestra di dialogo; sei tutto pronto :-)

Infine, è buona norma non utilizzare gli stili in linea. Così, invece di questo:

<a href="" class="click_me" style="font-size:15px;">Click for a modal</a> 

Creare un file CSS con il seguente:

.click_me { 
    font-size:15px; 
} 

si può fare lo stesso per #dialog, compreso il bordo si sta ora applicando con JavaScript:

#dialog { 
    border: 5px solid #848484; 
    width:640px; 
} 

Spero che questo aiuti.

---

Ecco un esempio di lavoro che applica i quattro punti che ho citato: http://jsfiddle.net/PPvG/yHTJw/

Si noti che gli stili di jQuery UI sono mancanti, in modo che il dialogo è un po 'brutto.:-)

---

Per garantire il dialogo funziona come previsto, assicurarsi che si sta utilizzando le ultime versioni di jQuery e jQuery UI e che si include un tema jQuery UI.

Ecco un esempio in cui tutto viene caricato tramite Google CDN:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" /> 

Includere questi nella <head> del codice HTML. Il risultato dovrebbe apparire like this. In caso contrario, puoi provare un paio di cose:

• Dai un'occhiata alla console JavaScript del tuo browser (ogni browser moderno ne ha una; Google it).
• Prova un altro browser.
• Provare un diverso modo di caricare la pagina (ad esempio tramite file:// versus via localhost).
• (Caso estremo :) Prova un altro computer e una diversa connessione Internet.

Se nessuno di questi lavori, mi dispiace dirlo, ma ... "stai sbagliando". :-P

Si noti che lo snippet sopra includerà il tema dell'interfaccia utente jQuery predefinito chiamato "base". Se non soddisfa le tue esigenze, puoi utilizzare Google CDN per alcuni altri temi predefiniti (vedere this blog post) oppure puoi creare il tuo tema utilizzando ThemeRoller.

---

Edit:

Per assicurarsi che la finestra di dialogo mantiene a fuoco (e quindi viene chiuso quando l'utente preme ESC, anche se l'utente fa clic da qualche altra parte della pagina), provare a impostare modal a true :

$('#dialog').dialog({ 
    autoOpen: false, 
    modal: true 
}); 

jsFiddle: http://jsfiddle.net/PPvG/yHTJw/3/

normale l'utente può comunque interagire con altri elementi sulla pagina (e, di conseguenza, tali elementi possono catturare l'attenzione dalla finestra di dialogo). Quando l'opzione modal è impostata su true, l'utente non può più eseguire iterazione con il resto della pagina e la finestra di dialogo manterrà l'attenzione indipendentemente da cosa.

Spero che questo aiuti.

Ultima domanda

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Problemi correlati

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.