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

Question

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

Answer 1

я нашел это работало в конце (обратите внимание на третью строку переопределяет открытую функцию, которая найти кнопку и скрывающую ее):

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

Чтобы скрыть кнопку закрытия на всех диалогах вы можете использовать следующий CSS тоже:

.ui-dialog-titlebar-close { 
    visibility: hidden; 
} 

Answer 2

Вы можете использовать CSS, чтобы скрыть кнопку закрытия вместо JavaScript:

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

Answer 3

«лучший» ответ не подходит для нескольких диалогов. вот лучшее решение.

open: function(event, ui) { 
    //hide close button. 
    $(this).parent().children().children('.ui-dialog-titlebar-close').hide(); 
}, 

Answer 4

open: function(event, ui) { 
    //hide close button. 
    $(this).parent().children().children('.ui-dialog-titlebar-close').click(function(){ 
    $("#dhx_combo_list").remove(); 
    }); 
}, 

yaaaay! Это действительно работает! Я поймаю событие закрытия диалогового окна. В приведенном выше коде он удаляет div (#dhx_combo_list).

Отлично, спасибо всем!

Answer 5

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

Answer 6

Я думаю, что это лучше.

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

Answer 7

Лучший способ скрыть кнопку, чтобы отфильтровать его с его атрибуты значка данные:

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

Answer 8

Вот еще один вариант, только с помощью CSS, который не более чем ездить каждый диалог на этой странице.

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

Working Example

Answer 9

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 10

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

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

могут быть использованы.

Answer 11

Ничего из перечисленного не работает. Решение, которое действительно работает, это:

Проверьте, не работает ли он на вас.

Answer 12

После того, как вы назвали .dialog() на элемент, вы можете найти кнопку закрытия (и другой диалог разметки) в любое удобное время без использования обработчиков событий:

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

Альтернативный метод:

Внутри диалога обработчики событий, this относится к элементу, «dialogged» и $(this).parent() относится к диалоговому контейнера разметки, так что:

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

FYI, диалог разметки выглядит следующим образом: ответ

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

Answer 13

Роберта Маклина не работает для меня.

Однако это работает для меня:

$("#div").dialog({ 
    open: function() { $(".ui-dialog-titlebar-close").hide(); } 
}); 

Answer 14

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

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

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

Answer 15

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

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

Answer 16

Как показано на официальном page и предложил Давиду:

Создание стиля:

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

Тогда вы можете просто добавить не-близко класс к любому диалогу, чтобы скрыть это кнопка закрытия:

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

Answer 17

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

Answer 18

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

Answer 19

Вы можете удалить кнопку закрытия на код ниже. Есть и другие варианты, которые вы могли бы использовать.

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

Answer 20

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

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