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

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

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

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

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();
},

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

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" );
        }
    }]
});

Ich denke das ist besser.

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

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

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

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

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.

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

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

Für die Deaktivierung der Klasse gilt der Funktionscode:

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

könnte genutzt werden.

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

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();
  });
},

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

Sie können auch Ihre Kopfzeile entfernen:

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

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

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

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
    },
    ....
});

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

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

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

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

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