@MikeCole Документация для 1.10 - я думаю, что если вы хотите скрыть кнопку закрытия в любых более низких версиях, вам нужно будет сделать что-то вроде ответов ниже.
Джарретт
1
Используйте "ui-dialog-titlebar-close": "display: none;" когда мы устанавливаем модальное диалоговое окно
jqueryui
Ответы:
711
Я обнаружил, что это сработало в конце (обратите внимание, что третья строка переопределяет функцию открытия, которая находит кнопку и скрывает ее):
$(".ui-dialog-titlebar-close", ui).hide();скрыть кнопку только для этого диалога.
Энтони Сердюков
67
Я не мог заставить его работать с параметром пользовательского интерфейса либо. В итоге я использовал: $ (". Ui-dialog-titlebar-close", $ (this) .parent ()). Hide ();
Найджел
70
@Anton Просто хочу отметить, что просто указать 'ui' не работает. Вы должны использовать «ui.dialog». поэтому правильная строка будет $ (". ui-dialog-titlebar-close", ui.dialog) .hide ();
Брэдли Маунтфорд
22
@Bradley. UI не работал для меня, UI.Dialog работал, но применяется в каждом случае. Чтобы работа не применялась только к той функции, для которой определена функция open, я должен был сделать это: $ (". Ui-dialog-titlebar-close", this.parentNode) .hide ();
Мне нравится этот подход, потому что я могу использовать его вместе с такими вещами, как: .noTitleDlg .ui-dialog-titlebar {display: none} в CSS, чтобы создать способ, которым я хочу, чтобы мой диалог отображался и вел себя, а затем просто соответственно устанавливал dialogClass.
А. Мюррей
11
очень чистое решение ... +1 за то, что не задействованы дополнительные функции js для удаления кнопки.
Бонги
2
Отличная идея. Это удобно для нацеливания на конкретный диалог в ситуациях, когда вы используете один и тот же метод открытия для всех диалогов, и не очень удобно менять его для конкретного экземпляра.
ZolaKt
3
Мое любимое решение. Я думал, что-то вроде этого будет лучшим подходом. Спасибо за то, что это уже закодировано здесь. Основываясь на этом, мне нравится использовать этот вариант, который будет принимать атрибут класса div содержимого диалога, в который я могу поместить класс «no-close»:dialogClass : $("#my-dialog-id").attr("class"),
LS
Это решение позволяет закрывать с escape, если вы хотите предотвратить закрытие при использовании escape:$( ".selector" ).dialog({ dialogClass: 'no-close' , closeOnEscape: false,});
Младен Адамович
124
«лучший» ответ не подходит для нескольких диалогов. вот лучшее решение.
open:function(event, ui){//hide close button.
$(this).parent().children().children('.ui-dialog-titlebar-close').hide();},
Это сложнее, чем нужно. $(".ui-dialog-titlebar-close", $(this).parent()).hide();
Кевин Панко
@KevinPanko ваше предложение хорошо работает при использовании примера, представленного на демонстрационном сайте jquery ui с ASP.NET v2.0 на странице .aspx. jqueryui.com/demos/dialog/modal-form.html
Мэтью
6
.closest ('. ui-dialog') лучше, чем предполагать родителя.
техномаг
86
Вы можете использовать CSS, чтобы скрыть кнопку закрытия вместо JavaScript:
.ui-dialog-titlebar-close{
display: none;}
Если вы не хотите влиять на все модалы, вы можете использовать правило вроде
Этот ответ был простым и понятным. Это применимо, однако, только если вы хотите отключить кнопку для всех диалогов.
Марк Бриттингем
@MarkBrittingham Вы можете просто применить пользовательский класс CSS к своему модалу и к селектору, тогда это будет применяться ко всем, кого вы хотите
Хуан Мендес,
48
Как показано на официальной странице и предложено Дэвидом:
Проблема в том, что он иногда скрывает кнопку закрытия и для других диалогов. как это предотвратить.
Завид Аббаси
Даже используя open: function (event, ui) {$ (this) .closest ('. Ui-dialog'). Find ('. Ui-dialog-titlebar-close'). Show (); } не работает.
Завид Аббаси
34
После того, как вы вызвали .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ссылается на элемент «диалог» и $(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}});
К вашему сведению, диалоговая разметка выглядит так:
<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>
Ничто из вышеперечисленного не работает. Решение, которое действительно работает:
$(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
Кнопка закрытия, добавленная виджетом «Диалог», имеет класс «ui-dialog-titlebar-close», поэтому после первоначального вызова .dialog () вы можете использовать такой оператор, чтобы снова удалить кнопку закрытия: Это работает ..
Вы должны быть в состоянии использовать прямой CSS здесь вместо JS, если вы только скрываете значок. Все, что .hide()делает, установлено display:noneв CSS, поэтому $(".ui-button-icon-only").hide();функционально эквивалентно .ui-button-icon-only { display: none; }.
Поскольку я обнаружил, что делаю это в нескольких местах своего приложения, я обернул его в плагин:
(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)
Пример использования:
$("#dialog").dialog({/* lots of options */}).dialogNoClose();
Вы можете удалить кнопку закрытия с кодом ниже. Есть и другие варианты, с которыми вы можете бороться.
$('#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();
Ответы:
Я обнаружил, что это сработало в конце (обратите внимание, что третья строка переопределяет функцию открытия, которая находит кнопку и скрывает ее):
Чтобы скрыть кнопку закрытия во всех диалогах, вы также можете использовать следующий CSS:
источник
$(".ui-dialog-titlebar-close", ui).hide();
скрыть кнопку только для этого диалога.open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
Вот еще один вариант, использующий CSS, который не перегружает все диалоги на странице.
CSS
HTML
Javascript.
Рабочий пример
источник
dialogClass : $("#my-dialog-id").attr("class"),
$( ".selector" ).dialog({ dialogClass: 'no-close' , closeOnEscape: false,});
«лучший» ответ не подходит для нескольких диалогов. вот лучшее решение.
источник
$(".ui-dialog-titlebar-close", $(this).parent()).hide();
Вы можете использовать CSS, чтобы скрыть кнопку закрытия вместо JavaScript:
Если вы не хотите влиять на все модалы, вы можете использовать правило вроде
И применить
.hide-close-btn
к верхнему узлу диалогаисточник
Как показано на официальной странице и предложено Дэвидом:
Создать стиль:
Затем вы можете просто добавить класс no-close в любой диалог, чтобы скрыть его кнопку закрытия:
источник
Я думаю, что это лучше.
источник
После того, как вы вызвали
.dialog()
элемент, вы можете найти кнопку закрытия (и другую разметку диалога) в любое удобное время без использования обработчиков событий:Альтернативный метод:
Внутри обработчиков событий диалога,
this
ссылается на элемент «диалог» и$(this).parent()
ссылается на контейнер разметки диалога, поэтому:К вашему сведению, диалоговая разметка выглядит так:
Демоверсии здесь
источник
Ответ Роберта Маклина не сработал для меня.
Это, однако, работает для меня:
источник
источник
Ничто из вышеперечисленного не работает. Решение, которое действительно работает:
Пожалуйста, проверьте, работает ли он для вас.
источник
Лучший способ скрыть кнопку - отфильтровать ее с помощью атрибута data-icon:
источник
http://jsfiddle.net/marcosfromero/aWyNn/
источник
Для деактивации класса краткий код:
может быть использовано.
источник
Кнопка закрытия, добавленная виджетом «Диалог», имеет класс «ui-dialog-titlebar-close», поэтому после первоначального вызова .dialog () вы можете использовать такой оператор, чтобы снова удалить кнопку закрытия: Это работает ..
источник
Я ловлю событие закрытия диалогового окна. Этот код затем удаляет
<div>
(#dhx_combo_list
):источник
источник
.hide()
делает, установленоdisplay:none
в CSS, поэтому$(".ui-button-icon-only").hide();
функционально эквивалентно.ui-button-icon-only { display: none; }
.Вы также можете удалить строку заголовка:
<div data-role="header">...</div>
который удаляет кнопку закрытия.
источник
источник
Простой способ достижения: (Сделай это в своем
Javascript
)источник
Поскольку я обнаружил, что делаю это в нескольких местах своего приложения, я обернул его в плагин:
Пример использования:
источник
Я фанат однострочников (где они работают!). Вот что работает для меня:
источник
Как насчет использования этой чистой строки CSS? Я считаю, что это самое чистое решение для диалога с данным Id:
источник
Вы можете удалить кнопку закрытия с кодом ниже. Есть и другие варианты, с которыми вы можете бороться.
источник