Как убрать кнопку закрытия в диалоговом окне jQuery UI?
Как удалить кнопку закрытия (крестик в правом верхнем углу) в диалоговом окне, созданном с помощью jQuery UI?
5 ответ(ов)
Я нашел, что это работает в конечном итоге (обратите внимание на третью строку, которая переопределяет функцию open, находя кнопку и скрывая её):
$("#div2").dialog({
closeOnEscape: false,
open: function(event, ui) {
$(".ui-dialog-titlebar-close", ui.dialog || ui).hide();
}
});
Чтобы скрыть кнопку закрытия во всех диалогах, вы также можете использовать следующий CSS:
.ui-dialog-titlebar-close {
visibility: hidden;
}
Таким образом, вы сможете скрыть кнопку закрытия как для конкретного диалога, так и для всех диалогов на странице.
В данном случае, если вам нужно скрыть кнопку закрытия в диалоге, то предоставленный вами код действительно является хорошим решением. Однако, если ваш диалог используется в нескольких местах, рекомендуется создать функцию, которая будет скрывать кнопку закрытия только для конкретных диалогов. Это позволит вам избежать дублирования кода и сделает решение более универсальным.
Пример улучшенного решения:
function hideCloseButton(dialogElement) {
$(dialogElement).parent().children().children('.ui-dialog-titlebar-close').hide();
}
// Использование в вашем диалоге
$("#myDialog").dialog({
open: function(event, ui) {
hideCloseButton(this);
}
});
Такой подход делает код более чистым и управляемым, особенно если вам нужно будет скрывать кнопку закрытия в нескольких диалогах.
Вы можете использовать CSS для скрытия кнопки закрытия вместо JavaScript:
.ui-dialog-titlebar-close {
display: none;
}
Если не хотите, чтобы это правило затрагивало все модальные окна, вы можете использовать более специфичное правило, например:
.hide-close-btn .ui-dialog-titlebar-close {
display: none;
}
И применить класс .hide-close-btn
к верхнему элементу диалога.
Ваш код выглядит корректно. Он скрывает кнопку закрытия в заголовке диалога при открытии. Вот русскоязычный вариант ответа на вопрос:
open: function(event, ui) {
$(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide();
}
Этот код срабатывает при открытии диалога и использует jQuery для поиска кнопки закрытия (.ui-dialog-titlebar-close
) в рамках самого диалога (.ui-dialog
), а затем скрывает её с помощью метода .hide()
. Если вам требуется изменить видимость кнопки в зависимости от каких-то условий, можете добавить необходимую логику в данный обработчик.
Не забудьте убедиться, что jQuery подключен в вашем проекте. Если возникнут дополнительные вопросы, не стесняйтесь задавать!
Ответ Роберта МаКлина не сработал для меня.
Тем не менее, это решение работает для меня:
$("#div").dialog({
open: function() { $(".ui-dialog-titlebar-close").hide(); }
});
Как выбрать элемент с несколькими классами в jQuery?
jQuery: Получить имя тега выбранного элемента
Как применить !important с помощью .css()?
Высота, равная динамической ширине (флюидная верстка на CSS)
Установить фиксированную ширину столбца таблицы независимо от количества текста в ячейках?