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


775

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


11
Controlla la documentazione, primo sottotitolo: api.jqueryui.com/dialog
Mike Cole

1
@MikeCole La documentazione è per 1.10 - Penso che se vuoi nascondere il pulsante di chiusura in qualsiasi versione inferiore dovrai fare qualcosa come le risposte qui sotto.
Jarrett,

1
Usa "ui-dialog-titlebar-close": "display: none;" quando impostiamo la finestra di dialogo modale
jqueryui

Risposte:


711

Ho trovato che ha funzionato alla fine (nota la terza riga che sovrascrive la funzione aperta che trova il pulsante e lo nasconde):

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

Per nascondere il pulsante di chiusura in tutte le finestre di dialogo è possibile utilizzare anche il seguente CSS:

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

121
$(".ui-dialog-titlebar-close", ui).hide();per nascondere il pulsante solo per questa finestra di dialogo.
Anthony Serdyukov,

67
Non riuscivo nemmeno a farlo funzionare dal parametro UI. Ho finito per usare: $ (". Ui-dialog-titlebar-close", $ (this) .parent ()). Hide ();
Nigel,

70
@Anton Voglio solo sottolineare che il solo fatto di specificare 'ui' non funziona. devi usare 'ui.dialog'. quindi la linea corretta sarebbe $ (". ui-dialog-titlebar-close", ui.dialog) .hide ();
Bradley Mountford,

22
@Bradley. non ho funzionato per me, ui.dialog ha fatto ma applicato su ogni istanza. Per far sì che ot funzionasse solo a quello per cui è stata definita la funzione open, ho dovuto fare questo: $ (". Ui-dialog-titlebar-close", this.parentNode) .hide ();
Nabab,

12
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
opengrid,

361

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

Il CSS

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

HTML

<div class="selector" title="No close button">
    This is a test without a close button
</div>

Il Javascript.

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

Esempio di lavoro


6
Mi piace questo approccio perché posso usarlo insieme a cose come: .noTitleDlg .ui-dialog-titlebar {display: none} nei CSS per costruire il modo in cui voglio che la mia finestra di dialogo appaia e si comporti e quindi imposta dialogClass di conseguenza.
A. Murray,

11
soluzione molto pulita ... +1 per non coinvolgere la funzionalità js aggiuntiva per rimuovere il pulsante.
Bong,

2
Grande idea. È utile per indirizzare una finestra di dialogo specifica in situazioni in cui si utilizza lo stesso metodo aperto per tutte le finestre di dialogo e non è molto pratico modificarlo per un'istanza specifica.
ZolaKt,

3
La mia soluzione preferita Pensavo che qualcosa del genere sarebbe l'approccio migliore. Grazie per averlo già codificato qui. Basandomi su questo, mi piace usare questa variazione che prenderà l'attributo class del div del contenuto della finestra di dialogo, in cui posso mettere la classe "no-close":dialogClass : $("#my-dialog-id").attr("class"),
LS

Questa soluzione consente la chiusura con escape, se si desidera impedire la chiusura in caso di escape:$( ".selector" ).dialog({ dialogClass: 'no-close' , closeOnEscape: false,});
Mladen Adamovic,

124

la risposta "migliore" non sarà utile per più finestre di dialogo. ecco una soluzione migliore.

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

23
Questo è più complicato del necessario. $(".ui-dialog-titlebar-close", $(this).parent()).hide();
Kevin Panko,

@KevinPanko il tuo suggerimento funziona bene quando si utilizza l'esempio fornito dal sito demo dell'interfaccia utente jquery con ASP.NET v2.0 in una pagina aspx. jqueryui.com/demos/dialog/modal-form.html
Matthew Dally

6
.closest ('. ui-dialog') è meglio che assumere un genitore.
technomage

86

Puoi usare CSS per nascondere il pulsante di chiusura anziché JavaScript:

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

Se non vuoi influenzare tutte le modali, puoi usare una regola come

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

E applica .hide-close-btnal nodo superiore della finestra di dialogo


3
Questa risposta è stata semplice e chiara. Si applica, tuttavia, solo se si desidera disabilitare il pulsante per tutte le finestre di dialogo.
Mark Brittingham,

@MarkBrittingham Puoi semplicemente applicare una classe CSS personalizzata al tuo modale e al selettore, quindi questo si applicherà a chi vuoi
Juan Mendes

48

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 classe no-close a qualsiasi finestra di dialogo per nascondere il pulsante di chiusura:

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

41

Penso che sia meglio

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

Il problema è che occasionalmente nasconde il pulsante di chiusura anche per altri dialoghi. come prevenirlo.
Zaveva Abbasi il

Anche usando open: function (event, ui) {$ (this) .closest ('. Ui-dialog'). Find ('. Ui-dialog-titlebar-close'). Show (); } non funziona.
Zaveva Abbasi il

34

Dopo aver richiamato .dialog()un elemento, è possibile individuare il pulsante di chiusura (e altri markup della finestra di dialogo) in qualsiasi momento utile 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:

All'interno dei gestori di eventi di dialogo, si thisriferisce all'elemento "dialogato" e $(this).parent()al contenitore di markup 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 della finestra di dialogo è simile al seguente:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
    <!-- ^--- this is the dialog widget -->
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <span class="ui-dialog-title" id="ui-dialog-title-dialog">Dialog title</span>
        <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
    </div>
    <div id="div2" style="height: 200px; min-height: 200px; width: auto;" class="ui-dialog-content ui-widget-content">
        <!-- ^--- this is the element upon which .dialog() was called -->
    </div>
</div>

Demo qui


25

La risposta di Robert MacLean non ha funzionato per me.

Questo tuttavia funziona per me:

$("#div").dialog({
   open: function() { $(".ui-dialog-titlebar-close").hide(); }
});

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

9

Nessuna delle precedenti funzioni. 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.


7

Il modo migliore per nascondere il pulsante è filtrarlo con l'attributo data-icon:

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

6

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

6

Per disattivare la classe, il codice funzione:

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

può essere usato.


6

Il pulsante di chiusura aggiunto dal widget Dialog ha la classe 'ui-dialog-titlebar-close', quindi dopo la tua chiamata iniziale a .dialog (), puoi usare un'istruzione come questa per rimuovere di nuovo il pulsante di chiusura: Funziona ..

$( 'a.ui-dialog-titlebar-close' ).remove();

6

Prendo l'evento di chiusura della finestra di dialogo. Questo codice quindi rimuove il <div>( #dhx_combo_list):

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

5
$(".ui-button-icon-only").hide();

2
Dovresti essere in grado di utilizzare CSS direttamente qui invece di JS se nascondi solo l'icona. Tutto .hide()ciò che viene impostato è impostato display:nonein CSS, quindi $(".ui-button-icon-only").hide();è funzionalmente equivalente a .ui-button-icon-only { display: none; }.
KyleMit,

3

Puoi anche rimuovere la riga di intestazione:

<div data-role="header">...</div>

che rimuove il pulsante di chiusura.



2

Modo semplice per ottenere: (Fallo 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
    },
    ....
});

1

Da quando ho scoperto che lo stavo facendo in diversi punti della mia app, l'ho avvolto 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();

0

Sono un fan dei one-liner (dove lavorano!). Ecco cosa funziona per me:

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

0

Che ne dici di usare questa linea CSS pura? Trovo che questa sia la soluzione più pulita per una finestra di dialogo con ID specificato:

.ui-dialog[aria-describedby="IdValueOfDialog"] .ui-dialog-titlebar-close { display: none; }

-1

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();
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.