Come rimuovere il pulsante di chiusura nella finestra di dialogo dell’interfaccia utente jQuery?

Come rimuovo il pulsante di chiusura (la X nell’angolo in alto a destra) su una finestra di dialogo creata dall’interfaccia utente jQuery?

Ho trovato questo ha funzionato alla fine (notare la terza riga che ignora la funzione di apertura che trova il pulsante e lo nasconde):

$("#div2").dialog({ closeOnEscape: false, open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog | ui).hide(); } }); 

Per hide il pulsante di chiusura su tutte le windows di dialogo puoi usare anche il seguente CSS:

 .ui-dialog-titlebar-close { visibility: hidden; } 

Ecco un’altra opzione che usa solo CSS che non supera ogni finestra di dialogo sulla pagina.

Il CSS

 .no-close .ui-dialog-titlebar-close {display: none } 

L’HTML

 
This is a test without a close button

Il Javascript.

 $( ".selector" ).dialog({ dialogClass: 'no-close' }); 

Esempio di lavoro

la “migliore” risposta non andrà bene per più dialoghi. ecco una soluzione migliore.

 open: function(event, ui) { //hide close button. $(this).parent().children().children('.ui-dialog-titlebar-close').hide(); }, 

Puoi utilizzare i CSS per hide il pulsante di chiusura anziché JavaScript:

 .ui-dialog-titlebar-close{ display: none; } 

Come mostrato nella pagina ufficiale e suggerito da David:

Crea uno stile:

 .no-close .ui-dialog-titlebar-close { display: none; } 

Quindi, puoi semplicemente aggiungere la class no-close a qualsiasi finestra di dialogo per hide il suo pulsante di chiusura:

 $( "#dialog" ).dialog({ dialogClass: "no-close", buttons: [{ text: "OK", click: function() { $( this ).dialog( "close" ); } }] }); 

Penso che sia meglio.

 open: function(event, ui) { $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide(); } 

Una volta chiamato .dialog() su un elemento, è ansible individuare il pulsante di chiusura (e altri markup di dialogo) in qualsiasi momento opportuno senza utilizzare i gestori di eventi:

 $("#div2").dialog({ // call .dialog method to create the dialog markup autoOpen: false }); $("#div2").dialog("widget") // get the dialog widget element .find(".ui-dialog-titlebar-close") // find the close button for this dialog .hide(); // hide it 

Metodo alternativo:

Gestori di eventi all’interno della finestra di dialogo, this riferisce all’elemento che è “dialportato” e $(this).parent() riferisce al contenitore della finestra di dialogo, quindi:

 $("#div3").dialog({ open: function() { // open event handler $(this) // the element being dialogged .parent() // get the dialog widget element .find(".ui-dialog-titlebar-close") // find the close button for this dialog .hide(); // hide it } }); 

Cordiali saluti, il markup di dialogo si presenta così:

 
Dialog title close

Demo qui

La risposta di Robert MacLean non ha funzionato per me.

Questo però funziona per me:

 $("#div").dialog({ open: function() { $(".ui-dialog-titlebar-close").hide(); } }); 
 $("#div2").dialog({ closeOnEscape: false, open: function(event, ui) { $('#div2').parent().find('a.ui-dialog-titlebar-close').hide();} }); 

Nessuno dei lavori di cui sopra. La soluzione che funziona davvero è:

 $(function(){ //this is your dialog: $('#mydiv').dialog({ // Step 1. Add an extra class to our dialog to address the dialog directly. Make sure that this class is not used anywhere else: dialogClass: 'my-extra-class' }) // Step 2. Hide the close 'X' button on the dialog that you marked with your extra class $('.my-extra-class').find('.ui-dialog-titlebar-close').css('display','none'); // Step 3. Enjoy your dialog without the 'X' link }) 

Si prega di verificare se funziona per voi.

Il modo migliore per hide il pulsante è filtrarlo con l’attributo data-icon:

 $('#dialog-id [data-icon="delete"]').hide(); 

http://jsfiddle.net/marcosfromero/aWyNn/

 $('#yourdiv'). // Get your box ... dialog(). // ... and turn it into dialog (autoOpen: false also works) prev('.ui-dialog-titlebar'). // Get title bar,... find('a'). // ... then get the X close button ... hide(); // ... and hide it 
 open: function(event, ui) { //hide close button. $(this).parent().children().children('.ui-dialog-titlebar-close').click(function(){ $("#dhx_combo_list").remove(); }); }, 

yaaaay! Funziona davvero! Prendo l’evento ravvicinato della finestra di dialogo. Nel codice sopra, rimuove il div (#dhx_combo_list).

Fantastico, grazie a tutti!

Per la distriggerszione della class, il codice funzione:

 $(".ui-dialog-titlebar-close").hide(); 

può essere usato.

Il pulsante di chiusura aggiunto dal widget Finestra di dialogo ha la class ‘ui-dialog-titlebar-close’, quindi dopo la chiamata iniziale a .dialog (), puoi usare un’istruzione come questa per rimuovere nuovamente il pulsante di chiusura: Funziona ..

 $( 'a.ui-dialog-titlebar-close' ).remove(); 
 $(".ui-button-icon-only").hide(); 

Puoi anche rimuovere la tua riga di intestazione:

...

che rimuove il pulsante di chiusura.

 document.querySelector('.ui-dialog-titlebar-close').style.display = 'none' 

Da quando ho trovato che stavo facendo questo in diversi punti della mia app, l’ho inserito in un plugin:

 (function ($) { $.fn.dialogNoClose = function () { return this.each(function () { // hide the close button and prevent ESC key from closing $(this).closest(".ui-dialog").find(".ui-dialog-titlebar-close").hide(); $(this).dialog("option", "closeOnEscape", false); }); }; })(jQuery) 

Esempio di utilizzo:

 $("#dialog").dialog({ /* lots of options */ }).dialogNoClose(); 

Un modo semplice per ottenere: (fai questo nel tuo Javascript )

 $("selector").dialog({ autoOpen: false, open: function(event, ui) { // It'll hide Close button $(".ui-dialog-titlebar-close", ui.dialog | ui).hide(); }, closeOnEscape: false, // Do not close dialog on press Esc button show: { effect: "clip", duration: 500 }, hide: { effect: "blind", duration: 200 }, .... }); 

Puoi rimuovere il pulsante di chiusura con il codice qui sotto. Ci sono anche altre opzioni che potresti combattere utili.

 $('#dialog-modal').dialog({ //To hide the Close 'X' button "closeX": false, //To disable closing the pop up on escape "closeOnEscape": false, //To allow background scrolling "allowScrolling": true }) //To remove the whole title bar .siblings('.ui-dialog-titlebar').remove();