Подтвердить что ты не робот

Отключить кнопку "X" в правом верхнем углу диалогового окна

Возможный дубликат:
Удалить кнопку закрытия в диалоговом окне jQueryUI?

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

Есть ли способ отключить "X" в диалоговом окне?

Разъяснение: Я просто использую стандартный диалог интерфейса jQuery: $.dialog().

4b9b3361

Ответ 1

Я предполагаю, что вы используете jQuery UI.

Если это так, присоедините обработчик события beforeClose и верните false из него, если кнопка "Согласен" не была нажата. Вы также можете использовать CSS для установки кнопки X на {display: none}

var agreed = false; //has to be global
$("something").dialog({
    buttons: {
        'Apply': function () {
            agreed = true;
            $(this).dialog("close");
        }
    },
    beforeClose: function () {
        return agreed;
    }
});

Ответ 3

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

Вы можете использовать плагин jQuery modal dialog, например jqModal.

Обратите внимание, однако, что вы не можете запретить пользователю закрывать главное окно.


EDIT. Если вы используете диалоговое окно jQuery UI, вы можете добавить следующее правило CSS:

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

Вы также должны установить closeOnEscape в false.


Кроме того, почему вы форсируете, чтобы пользователь нажал кнопку I Agree?
Почему вы не можете обработать закрытое окно, как будто вы не согласны?

Ответ 4

Насколько ваша задача запретить пользователю щелкнуть X, я бы рекомендовал один из нескольких подходов:

  • используйте правило CSS, чтобы настроить отображение этой кнопки на "none". Используя режим Firebug Inspect, вы должны иметь возможность посмотреть на тег, в котором находится диалоговое окно JQuery UI, и добавить для него правило CSS. Если на дисплее нет ни одного, пользователь не сможет его щелкнуть.
  • Аналогично добавьте событие jQuery.click(), которое ничего не делает, и возвращает false, чтобы остановить распространение события (я никогда не делал этого, но он должен работать).
  • Вы можете прикрепить функцию к событию beforeClose(), чтобы вы могли запретить закрытие диалогового окна, если пользователь не нажал "Я согласен"
  • Самое сложное из всех, но полезно, если вы хотите иметь похожие диалоги или выполнять другие функциональные изменения, вы можете подклассифицировать диалоговое окно jQuery UI, создав плагин jQuery UI, который внутренне создает диалоговое окно, а затем изменяет поведение по умолчанию, применяя правила CSS или присоединения событий, как описано выше.

Надеюсь, что один из них заставит вас идти в правильном направлении...

Ответ 5

Заметьте, что div, созданный для заголовка диалога, имеет атрибут aria-labelledby, который ссылается на ваш диалог (ui-dialog-title- {yourDialogName}), поэтому я просто спрятал "x" со следующим CSS:

div.ui-dialog[aria-labelledby="ui-dialog-title-myDialog"] a.ui-dialog-titlebar-close {
    display: none;
}

Я также устанавливаю для параметра closeOnEscape значение false, чтобы предотвратить это.

Ответ 6

У меня есть связанная с этим проблема: перезагрузите после того, как пользователь нажимает кнопку X, чтобы закрыть ее в определенном диалоговом окне, без перезагрузки в других окнах. Я добавил к функции диалога jQuery в .js:

.click(function(i){ jQuery('span.ui-dialog-title').each(function(index) {


    if (jQuery(this).text() == '/**Title String Here**/') {

        a.close(i); location.reload(true); 

    } else {

        a.close(i);
    }

  });
return false})

Это ищет заголовок в тексте диапазона и перезагружается при закрытии, иначе закрывается без перезагрузки.

Ответ 7

Просто дополнение к Майклу Мидоузу. Если у вас есть несколько форм и вы не хотите иметь переменную global, вы можете просто добавить атрибут в элемент формы DOM. Что-то вроде:

$('#yourForm').dialog(
 open : function(){
   $('#yourForm').attr('agreed', false);
 },
 beforeClose : function(){
   return $('#yourForm').attr('agreed') == 'true';
 },
 buttons:{'OK':function(){
        $('#yourForm').attr('agreed', true);        
        $(this).dialog('close');
    },
    'Cancel' : function(){
        $('#yourForm').attr('agreed', false);
        $(this).dialog('close');
    }
 }
);

Я думаю, вам нужно сравнить с "true", а не только true, так как я думаю, что attr хранятся в виде строки. но я не уверен в этом....

Ответ 8

Если вы используете alert, возможно, вам стоит рассмотреть confirm:

if (!confirm("Click OK to confirm that you agree to the terms and conditions.")) {
    // they didn't click OK
} else {
    // they did.
}

Или используйте плагин, например, упомянутые SLaks