8

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

8

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

5 ответ(ов)

7

Я нашел, что это работает в конечном итоге (обратите внимание на третью строку, которая переопределяет функцию open, находя кнопку и скрывая её):

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

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

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

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

1

В данном случае, если вам нужно скрыть кнопку закрытия в диалоге, то предоставленный вами код действительно является хорошим решением. Однако, если ваш диалог используется в нескольких местах, рекомендуется создать функцию, которая будет скрывать кнопку закрытия только для конкретных диалогов. Это позволит вам избежать дублирования кода и сделает решение более универсальным.

Пример улучшенного решения:

function hideCloseButton(dialogElement) {
    $(dialogElement).parent().children().children('.ui-dialog-titlebar-close').hide();
}

// Использование в вашем диалоге
$("#myDialog").dialog({
    open: function(event, ui) {
        hideCloseButton(this);
    }
});

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

0

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

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

Если не хотите, чтобы это правило затрагивало все модальные окна, вы можете использовать более специфичное правило, например:

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

И применить класс .hide-close-btn к верхнему элементу диалога.

0

Ваш код выглядит корректно. Он скрывает кнопку закрытия в заголовке диалога при открытии. Вот русскоязычный вариант ответа на вопрос:

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

Этот код срабатывает при открытии диалога и использует jQuery для поиска кнопки закрытия (.ui-dialog-titlebar-close) в рамках самого диалога (.ui-dialog), а затем скрывает её с помощью метода .hide(). Если вам требуется изменить видимость кнопки в зависимости от каких-то условий, можете добавить необходимую логику в данный обработчик.

Не забудьте убедиться, что jQuery подключен в вашем проекте. Если возникнут дополнительные вопросы, не стесняйтесь задавать!

0

Ответ Роберта МаКлина не сработал для меня.

Тем не менее, это решение работает для меня:

$("#div").dialog({
   open: function() { $(".ui-dialog-titlebar-close").hide(); }
});
Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь