Как удалить кнопку закрытия в диалоговом окне jQuery UI?

Question

Как убрать кнопку закрытия ( X в правом верхнем углу) в диалоговом окне, созданном пользовательским интерфейсом jQuery?

Answer 1

Лучший способ скрыть кнопку - отфильтровать ее по атрибуту data-icon:

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

Answer 2

Я улавливаю событие закрытия диалогового окна. Затем этот код удаляет <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();
  });
},

Answer 3

Кнопка закрытия, добавленная виджетом Dialog, имеет класс 'ui-dialog-titlebar-close', поэтому после первоначального вызова .dialog () вы можете использовать такой оператор, чтобы снова удалить кнопку закрытия: Это работает ..

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

Answer 4

Для деактивации класса, короткий код:

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

может быть использовано.

Answer 5

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

Answer 6

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

Answer 7

Вы также можете удалить строку заголовка:

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

, который удаляет кнопку закрытия.

Answer 8

Простой способ достижения: (Сделайте это в вашем 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
    },
    ....
});

Answer 9

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

Answer 10

Поскольку я обнаружил, что делал это в нескольких местах в своем приложении, я обернул его в плагин:

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

Пример использования:

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