@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):
$(".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 ();
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();},
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
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:
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:
<divclass="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"><!-- ^--- this is the dialog widget --><divclass="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><spanclass="ui-dialog-title"id="ui-dialog-title-dialog">Dialog title</span><aclass="ui-dialog-titlebar-close ui-corner-all"href="#"><spanclass="ui-icon ui-icon-closethick">close</span></a></div><divid="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>
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})
$('#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
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.
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.
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(){returnthis.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();
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();
Antworten:
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):
Um die Schaltfläche zum Schließen in allen Dialogen auszublenden, können Sie auch das folgende CSS verwenden:
quelle
$(".ui-dialog-titlebar-close", ui).hide();
um die Schaltfläche nur für diesen Dialog auszublenden .open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
Hier ist eine weitere Option, bei der nur CSS verwendet wird, die nicht jeden Dialog auf der Seite überschreibt.
Das CSS
Der HTML
Das Javascript.
Arbeitsbeispiel
quelle
dialogClass : $("#my-dialog-id").attr("class"),
$( ".selector" ).dialog({ dialogClass: 'no-close' , closeOnEscape: false,});
Die "beste" Antwort ist für mehrere Dialoge nicht gut. Hier ist eine bessere Lösung.
quelle
$(".ui-dialog-titlebar-close", $(this).parent()).hide();
Sie können CSS verwenden, um die Schaltfläche zum Schließen anstelle von JavaScript auszublenden:
Wenn Sie nicht alle Modalitäten beeinflussen möchten, können Sie eine Regel wie verwenden
Und
.hide-close-btn
auf den obersten Knoten des Dialogfelds anwendenquelle
Wie auf der offiziellen Seite gezeigt und von David vorgeschlagen:
Erstellen Sie einen Stil:
Anschließend können Sie die No-Close-Klasse einfach zu jedem Dialogfeld hinzufügen, um die Schaltfläche zum Schließen auszublenden:
quelle
Ich denke das ist besser.
quelle
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:Alternative Methode:
Innerhalb Dialog Event - Handler,
this
bezieht sich auf das Element ist „dialogged“ und$(this).parent()
bezieht sich auf die Dialogauszeichnungs Behälter, so:Zu Ihrer Information, das Dialog-Markup sieht folgendermaßen aus:
Demos hier
quelle
Die Antwort von Robert MacLean hat bei mir nicht funktioniert.
Dies funktioniert jedoch für mich:
quelle
quelle
Keines der oben genannten funktioniert. Die Lösung, die wirklich funktioniert, ist:
Bitte überprüfen Sie, ob es für Sie funktioniert.
quelle
Der beste Weg, die Schaltfläche auszublenden, besteht darin, sie mit ihrem Datensymbolattribut zu filtern:
quelle
http://jsfiddle.net/marcosfromero/aWyNn/
quelle
Für die Deaktivierung der Klasse gilt der Funktionscode:
könnte genutzt werden.
quelle
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.
quelle
Ich fange das Abschlussereignis des Dialogfelds ein. Dieser Code entfernt dann das
<div>
(#dhx_combo_list
):quelle
quelle
.hide()
nicht gesetztdisplay:none
in CSS, so$(".ui-button-icon-only").hide();
ist funktional äquivalent zu.ui-button-icon-only { display: none; }
.Sie können auch Ihre Kopfzeile entfernen:
<div data-role="header">...</div>
Dadurch wird die Schaltfläche zum Schließen entfernt.
quelle
quelle
Einfacher Weg zu erreichen: (Tun Sie dies in Ihrem
Javascript
)quelle
Da ich festgestellt habe, dass ich dies an mehreren Stellen in meiner App getan habe, habe ich es in ein Plugin eingewickelt:
Anwendungsbeispiel:
quelle
Ich bin ein Fan von Einzeilern (wo sie arbeiten!). Folgendes funktioniert bei mir:
quelle
Wie wäre es mit dieser reinen CSS-Zeile? Ich finde dies die sauberste Lösung für einen Dialog mit der angegebenen ID:
quelle
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.
quelle