Jak usunąć przycisk zamykania w oknie dialogowym interfejsu użytkownika jQuery?

775

Jak usunąć przycisk zamykania ( X w prawym górnym rogu) w oknie dialogowym utworzonym przez jQuery UI?

Robert MacLean
źródło
11
Sprawdź dokumentację, pierwszy podtytuł: api.jqueryui.com/dialog
Mike Cole
1
@MikeCole Dokumentacja dotyczy wersji 1.10 - Myślę, że jeśli chcesz ukryć przycisk zamykania w niższych wersjach, musisz zrobić coś takiego jak poniższe odpowiedzi.
Jarrett
1
Użyj „ui-dialog-titlebar-close”: „display: none;” kiedy konfigurujemy modalne okno dialogowe jqueryui
MarcoZen

Odpowiedzi:

711

Znalazłem to działające na końcu (zwróć uwagę na trzeci wiersz nadpisujący funkcję otwartą, która znajduje przycisk i ukrywa go):

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

Aby ukryć przycisk zamykania we wszystkich oknach dialogowych, możesz również użyć następującego CSS:

.ui-dialog-titlebar-close {
    visibility: hidden;
}
Robert MacLean
źródło
121
$(".ui-dialog-titlebar-close", ui).hide();aby ukryć przycisk tylko w tym oknie dialogowym.
Anthony Serdyukov
67
Nie mogłem też zmusić go do działania z parametru interfejsu użytkownika. Skończyło się na użyciu: $ (". Ui-dialog-titlebar-close", $ (this) .parent ()). Hide ();
Nigel
70
@Anton Chcę tylko zaznaczyć, że samo określenie „interfejsu użytkownika” nie działa. musisz użyć „ui.dialog”. więc poprawną linią będzie $ (". ui-dialog-titlebar-close", ui.dialog) .hide ();
Bradley Mountford
22
@Bradley. interfejs ui nie działał dla mnie, interfejs ui.dialog działał tylko w każdym przypadku. Aby ot działało tylko na tej zdefiniowanej dla funkcji open, musiałem to zrobić: $ (". Ui-dialog-titlebar-close", this.parentNode) .hide ();
Nabab
12
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
opengrid,
361

Oto kolejna opcja wykorzystująca CSS, która nie przesadza z każdym oknem dialogowym na stronie.

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>

JavaScript.

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

Przykład roboczy

David
źródło
6
Podoba mi się to podejście, ponieważ mogę go używać razem z takimi rzeczami jak: .noTitleDlg .ui-dialog-titlebar {display: none} w CSS, aby stworzyć sposób, w jaki chcę, aby moje okno wyglądało i zachowywało się, a następnie po prostu odpowiednio ustawiłem dialogClass.
A. Murray,
11
bardzo czyste rozwiązanie ... +1 za brak angażowania dodatkowej funkcjonalności js do usunięcia przycisku.
Bongs,
2
Świetny pomysł. Przydaje się celowanie w określone okno dialogowe w sytuacjach, w których używasz tej samej otwartej metody dla wszystkich okien dialogowych, i nie jest zbyt praktyczne zmienianie go dla konkretnego wystąpienia.
ZolaKt,
3
Moje ulubione rozwiązanie. Myślałem, że coś takiego będzie najlepszym podejściem. Dzięki za zakodowanie go tutaj. Opierając się na tym, lubię używać tej odmiany, która przenosi atrybut klasy div treści okna dialogowego, do którego mogę umieścić klasę „no-close”:dialogClass : $("#my-dialog-id").attr("class"),
LS
To rozwiązanie umożliwia zamykanie za pomocą ucieczki, jeśli chcesz zapobiec zamykaniu za pomocą ucieczki:$( ".selector" ).dialog({ dialogClass: 'no-close' , closeOnEscape: false,});
Mladen Adamovic
124

„najlepsza” odpowiedź nie będzie dobra w przypadku wielu okien dialogowych. oto lepsze rozwiązanie.

open: function(event, ui) { 
    //hide close button.
    $(this).parent().children().children('.ui-dialog-titlebar-close').hide();
},
Hrabia
źródło
23
Jest to bardziej skomplikowane niż potrzebujesz. $(".ui-dialog-titlebar-close", $(this).parent()).hide();
Kevin Panko,
@KevinPanko Twoja sugestia działa dobrze, gdy używasz przykładu podanego przez witrynę demonstracyjną interfejsu użytkownika jquery z ASP.NET v2.0 na stronie .aspx. jqueryui.com/demos/dialog/modal-form.html
Matthew Dally
6
.closest ('. ui-dialog') jest lepszy niż zakładanie rodzica.
technomage
86

Możesz użyć CSS, aby ukryć przycisk zamykania zamiast JavaScript:

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

Jeśli nie chcesz wpływać na wszystkie moduły, możesz użyć reguły podobnej do

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

I zastosuj .hide-close-btndo górnego węzła okna dialogowego

Gordian Yuan
źródło
3
Ta odpowiedź była łatwa i bezpośrednia. Dotyczy to jednak tylko wtedy, gdy chcesz wyłączyć przycisk dla wszystkich okien dialogowych.
Mark Brittingham
@MarkBrittingham Możesz po prostu zastosować niestandardową klasę CSS do swojego modalu i selektora, to będzie miało zastosowanie do kogokolwiek chcesz
Juan Mendes
48

Jak pokazano na oficjalnej stronie i zasugerował David:

Utwórz styl:

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

Następnie możesz po prostu dodać klasę bez zamykania do dowolnego okna dialogowego, aby ukryć jej przycisk zamykania:

$( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [{
        text: "OK",
        click: function() {
            $( this ).dialog( "close" );
        }
    }]
});
mhu
źródło
41

Myślę, że tak jest lepiej.

open: function(event, ui) {
  $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide();
}
Miguel Galante
źródło
Problem polega na tym, że czasami ukrywa przycisk zamykania również dla innych dialogów. jak temu zapobiec.
Zaveed Abbasi,
Nawet używając open: function (event, ui) {$ (this) .closest ('. Ui-dialog'). Find ('. Ui-dialog-titlebar-close'). Show (); } nie działa.
Zaveed Abbasi,
34

Po wywołaniu .dialog()elementu można zlokalizować przycisk zamykania (i inne znaczniki okna dialogowego) w dowolnym dogodnym czasie bez korzystania z procedur obsługi zdarzeń:

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

Metoda alternatywna:

thisProcedury obsługi zdarzeń okna dialogowego odnoszą się do elementu „dialogowanego” i $(this).parent()odnoszą się do kontenera znaczników okna dialogowego, więc:

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

Do Twojej wiadomości, znaczniki okna dialogowego wyglądają następująco:

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

Dema tutaj

Salman A.
źródło
25

Odpowiedź Roberta MacLeana nie działała dla mnie.

To jednak działa dla mnie:

$("#div").dialog({
   open: function() { $(".ui-dialog-titlebar-close").hide(); }
});
LATAĆ
źródło
9
$("#div2").dialog({
   closeOnEscape: false,
   open: function(event, ui) { $('#div2').parent().find('a.ui-dialog-titlebar-close').hide();}
});
Alok Vad
źródło
9

Żadne z powyższych nie działa. Rozwiązaniem, które naprawdę działa, jest:

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

Sprawdź, czy to działa dla Ciebie.

Michael Zelensky
źródło
7

Najlepszym sposobem ukrycia przycisku jest odfiltrowanie go za pomocą atrybutu data-icon:

$('#dialog-id [data-icon="delete"]').hide();
ibrahimab
źródło
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
źródło
6

W celu dezaktywacji klasy krótki kod:

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

może być użyty.

Caniko
źródło
6

Przycisk zamknięcia dodany przez widżet Dialog ma klasę „ui-dialog-titlebar-close”, więc po pierwszym wywołaniu funkcji .dialog () możesz użyć takiego polecenia, aby ponownie usunąć przycisk zamknięcia: Działa ..

$( 'a.ui-dialog-titlebar-close' ).remove();
Sonal S.
źródło
6

Łapię zdarzenie zamknięcia okna dialogowego. Ten kod usuwa następnie <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
źródło
5
$(".ui-button-icon-only").hide();
Sałata
źródło
2
Powinieneś być w stanie użyć tutaj prostego CSS zamiast JS, jeśli tylko ukrywasz ikonę. Wszystko .hide()robi jest ustawione display:nonew CSS, więc $(".ui-button-icon-only").hide();jest funkcjonalnie równoważne z .ui-button-icon-only { display: none; }.
KyleMit,
3

Możesz także usunąć wiersz nagłówka:

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

który usuwa przycisk zamykania.

łagodny żółty
źródło
2
document.querySelector('.ui-dialog-titlebar-close').style.display = 'none'
Matthew Wastrodowski
źródło
2

Łatwy sposób na osiągnięcie: (Zrób to w swoim 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
źródło
1

Ponieważ odkryłem, że robię to w kilku miejscach w mojej aplikacji, umieściłem go we wtyczce:

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

Przykład użycia:

$("#dialog").dialog({ /* lots of options */ }).dialogNoClose();
bmode
źródło
0

Jestem fanem jedno-liniowców (tam, gdzie działają!). Oto, co działa dla mnie:

$("#dialog").siblings(".ui-dialog-titlebar").find(".ui-dialog-titlebar-close").hide();
wordragon
źródło
0

A może skorzystasz z tej czystej linii CSS? Uważam to za najczystsze rozwiązanie dla okna dialogowego o podanym identyfikatorze:

.ui-dialog[aria-describedby="IdValueOfDialog"] .ui-dialog-titlebar-close { display: none; }
Chrisman
źródło
-1

Możesz usunąć przycisk zamykania za pomocą kodu poniżej. Istnieją również inne opcje, z którymi możesz walczyć.

$('#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
źródło