Wie entferne ich die Schaltfläche zum Schließen im Dialogfeld "jQuery-Benutzeroberfläche"?

775

Wie entferne ich die Schaltfläche zum Schließen (das X in der oberen rechten Ecke) in einem von jQuery UI erstellten Dialogfeld?

Robert MacLean
quelle
11
Überprüfen Sie die Dokumentation, erster Untertitel: api.jqueryui.com/dialog
Mike Cole
1
@MikeCole Die Dokumentation ist für 1.10 - Ich denke, wenn Sie die Schaltfläche zum Schließen in niedrigeren Versionen ausblenden möchten, müssen Sie etwa die folgenden Antworten ausführen.
Jarrett
1
Verwenden Sie "ui-dialog-titlebar-close": "display: none;" wenn wir den jqueryui modalen Dialog
einrichten

Antworten:

711

Ich habe festgestellt, dass dies am Ende funktioniert hat (beachten Sie, dass die dritte Zeile die Öffnungsfunktion überschreibt, die die Schaltfläche findet und ausblendet):

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

Um die Schaltfläche zum Schließen in allen Dialogen auszublenden, können Sie auch das folgende CSS verwenden:

.ui-dialog-titlebar-close {
    visibility: hidden;
}
Robert MacLean
quelle
121
$(".ui-dialog-titlebar-close", ui).hide();um die Schaltfläche nur für diesen Dialog auszublenden .
Anthony Serdyukov
67
Ich konnte es auch nicht über den UI-Parameter zum Laufen bringen. Am Ende habe ich Folgendes verwendet: $ (". UI-dialog-titlebar-close", $ (this) .parent ()). Hide ();
Nigel
70
@Anton Ich möchte nur darauf hinweisen, dass es nicht funktioniert, nur 'ui' anzugeben. Sie müssen 'ui.dialog' verwenden. Die richtige Zeile wäre also $ (". ui-dialog-titlebar-close", ui.dialog) .hide ();
Bradley Mountford
22
@ Bradley. ui hat bei mir nicht funktioniert, ui.dialog hat es aber auf jede Instanz angewendet. Um nicht nur auf die Funktion zu arbeiten, für die die Öffnungsfunktion definiert ist, musste ich Folgendes tun: $ (". UI-dialog-titlebar-close", this.parentNode) .hide ();
Nabab
12
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
Opengrid
361

Hier ist eine weitere Option, bei der nur CSS verwendet wird, die nicht jeden Dialog auf der Seite überschreibt.

Das CSS

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

Der HTML

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

Das Javascript.

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

Arbeitsbeispiel

David
quelle
6
Ich mag diesen Ansatz, weil ich ihn neben folgenden Dingen verwenden kann: .noTitleDlg .ui-dialog-titlebar {display: none} in CSS, um die Art und Weise aufzubauen, wie mein Dialog angezeigt und verhalten werden soll, und dann einfach die dialogClass entsprechend festzulegen.
A. Murray
11
Sehr saubere Lösung ... +1 für das Fehlen zusätzlicher js-Funktionen zum Entfernen der Schaltfläche.
Bongs
2
Großartige Idee. Es ist praktisch, ein bestimmtes Dialogfeld in Situationen anzuvisieren, in denen Sie für alle Dialoge dieselbe offene Methode verwenden, und es ist nicht sehr praktisch, es für eine bestimmte Instanz zu ändern.
ZolaKt
3
Meine Lieblingslösung. Ich dachte, so etwas wäre der beste Ansatz. Vielen Dank, dass Sie es hier bereits codiert haben. Darauf aufbauend verwende ich gerne diese Variante, die das Klassenattribut des Inhalts div des Dialogfelds übernimmt, in das ich die Klasse "no-close" einfügen kann:dialogClass : $("#my-dialog-id").attr("class"),
LS
Diese Lösung ermöglicht das Schließen mit Flucht, wenn Sie das Schließen bei Flucht verhindern möchten:$( ".selector" ).dialog({ dialogClass: 'no-close' , closeOnEscape: false,});
Mladen Adamovic
124

Die "beste" Antwort ist für mehrere Dialoge nicht gut. Hier ist eine bessere Lösung.

open: function(event, ui) { 
    //hide close button.
    $(this).parent().children().children('.ui-dialog-titlebar-close').hide();
},
Graf
quelle
23
Dies ist komplizierter als Sie brauchen. $(".ui-dialog-titlebar-close", $(this).parent()).hide();
Kevin Panko
@ KevinPanko Ihr Vorschlag funktioniert gut, wenn Sie das Beispiel verwenden, das von der Demo-Site jquery ui mit ASP.NET v2.0 auf einer ASPX-Seite bereitgestellt wird. jqueryui.com/demos/dialog/modal-form.html
Matthew Dally
6
.closest ('. ui-dialog') ist besser als die Annahme eines Elternteils.
Technomage
86

Sie können CSS verwenden, um die Schaltfläche zum Schließen anstelle von JavaScript auszublenden:

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

Wenn Sie nicht alle Modalitäten beeinflussen möchten, können Sie eine Regel wie verwenden

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

Und .hide-close-btnauf den obersten Knoten des Dialogfelds anwenden

Gordian Yuan
quelle
3
Diese Antwort war einfach und unkompliziert. Dies gilt jedoch nur, wenn Sie die Schaltfläche für alle Dialoge deaktivieren möchten.
Mark Brittingham
@ MarkBrittingham Sie können einfach eine benutzerdefinierte CSS-Klasse auf Ihr Modal und auf den Selektor anwenden, dann gilt dies für jeden, den Sie wollen
Juan Mendes
48

Wie auf der offiziellen Seite gezeigt und von David vorgeschlagen:

Erstellen Sie einen Stil:

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

Anschließend können Sie die No-Close-Klasse einfach zu jedem Dialogfeld hinzufügen, um die Schaltfläche zum Schließen auszublenden:

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

Ich denke das ist besser.

open: function(event, ui) {
  $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide();
}
Miguel Galante
quelle
Das Problem ist, dass gelegentlich die Schaltfläche zum Schließen auch für andere Dialoge ausgeblendet wird. wie man das verhindert.
Zaveed Abbasi
Auch mit open: function (event, ui) {$ (this) .closest ('. UI-dialog'). Find ('. UI-dialog-titlebar-close'). Show (); } funktioniert nicht.
Zaveed Abbasi
34

Sobald Sie .dialog()ein Element aufgerufen haben , können Sie die Schaltfläche zum Schließen (und andere Dialog-Markups) jederzeit ohne Verwendung von Ereignishandlern suchen:

$("#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

Alternative Methode:

Innerhalb Dialog Event - Handler, thisbezieht sich auf das Element ist „dialogged“ und $(this).parent()bezieht sich auf die Dialogauszeichnungs Behälter, so:

$("#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
    }
});

Zu Ihrer Information, das Dialog-Markup sieht folgendermaßen aus:

<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>

Demos hier

Salman A.
quelle
25

Die Antwort von Robert MacLean hat bei mir nicht funktioniert.

Dies funktioniert jedoch für mich:

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

Keines der oben genannten funktioniert. Die Lösung, die wirklich funktioniert, ist:

$(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
})

Bitte überprüfen Sie, ob es für Sie funktioniert.

Michael Zelensky
quelle
7

Der beste Weg, die Schaltfläche auszublenden, besteht darin, sie mit ihrem Datensymbolattribut zu filtern:

$('#dialog-id [data-icon="delete"]').hide();
Ibrahimab
quelle
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
marcosfromero
quelle
6

Für die Deaktivierung der Klasse gilt der Funktionscode:

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

könnte genutzt werden.

Caniko
quelle
6

Die vom Dialog-Widget hinzugefügte Schaltfläche zum Schließen hat die Klasse 'ui-dialog-titlebar-close'. Nach Ihrem ersten Aufruf von .dialog () können Sie eine solche Anweisung verwenden, um die Schaltfläche zum Schließen wieder zu entfernen: Es funktioniert.

$( 'a.ui-dialog-titlebar-close' ).remove();
Sonal S.
quelle
6

Ich fange das Abschlussereignis des Dialogfelds ein. Dieser Code entfernt dann das <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();
  });
},
Ruwan
quelle
5
$(".ui-button-icon-only").hide();
Cos
quelle
2
Sie sollten hier in der Lage sein, direktes CSS anstelle von JS zu verwenden, wenn Sie nur das Symbol ausblenden. Alle .hide()nicht gesetzt display:nonein CSS, so $(".ui-button-icon-only").hide();ist funktional äquivalent zu .ui-button-icon-only { display: none; }.
KyleMit
3

Sie können auch Ihre Kopfzeile entfernen:

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

Dadurch wird die Schaltfläche zum Schließen entfernt.

weichgelb
quelle
2
document.querySelector('.ui-dialog-titlebar-close').style.display = 'none'
Matthew Wastrodowski
quelle
2

Einfacher Weg zu erreichen: (Tun Sie dies in Ihrem 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
    },
    ....
});
Arsman Ahmad
quelle
1

Da ich festgestellt habe, dass ich dies an mehreren Stellen in meiner App getan habe, habe ich es in ein Plugin eingewickelt:

(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)

Anwendungsbeispiel:

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

Ich bin ein Fan von Einzeilern (wo sie arbeiten!). Folgendes funktioniert bei mir:

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

Wie wäre es mit dieser reinen CSS-Zeile? Ich finde dies die sauberste Lösung für einen Dialog mit der angegebenen ID:

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

Sie können die Schaltfläche zum Schließen mit dem folgenden Code entfernen. Es gibt auch andere Optionen, gegen die Sie möglicherweise nützlich kämpfen.

$('#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();
bpjoshi
quelle