немодальное окно, чтобы вести себя как модальное окно, используя JavaScript

Question

У меня есть требование, чтобы некоторые модальные всплывающие окна появлялись на веб-странице. Сначала я реализовал их как настоящие модальные окна, но потом я обнаружил, что настоящие модальные окна не могут связываться с родительским окном в IE.

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

Вот код, который я использую:

modalPopup = window.open(url, 'popup', arr.join(",")); //use a global var here
modalPopup.focus();

$(window).bind("focus.modal", function(){
  if(modalPopup){
    modalPopup.focus();
  } else {
    $(window).unbind("focus.modal");
  }
});

В этом есть несколько ошибок:

1. В Firefox, когда я закрываю всплывающее окно, modalPopup не становится пустым, он указывает на родительское окно. (это нормально, так как в любом случае мы не поддерживаем firefox)

2. В IE он работает как шарм, когда вы открываете 1 окно и закрываете его, но открытие еще нескольких окон приводит к исключению:

   Ошибка: вызываемый (сервер [не серверное приложение]) недоступен и исчез; все соединения недействительны. Вызов не выполнен.

edit : в IE ошибка возникает, когда modalPopup.focus (); называется. очевидно, modalPopup никогда не устанавливается в ложное значение при закрытии: P

Можете ли вы помочь мне написать лучшую реализацию, которая использует window.open для создания всплывающих окон?

Прежде чем кто-либо что-то скажет, использование лайтбокса не вариант . Всплывающие окна содержат TON html, javascript и т. Д., И загрузка их в DOM не приведет к хорошему UX. Кроме того, мы должны иметь эту работу на IE6.

Answer 1

Окна, содержащие «тонну» JavaScript, HTML и т. Д., Не являются причиной того, что вы не можете использовать методы стиля «лайтбокс» (которые работают в IE6; я не знаю, какая у вас библиотека смотрел на не). Техника проста:

• Иметь абсолютно позиционированный iframe на странице, z-индекс которой выше, чем любой другой контент, обычно показанный на странице. Обычно iframe скрыт.
• При выполнении "модального режима" покажите это iframe и установите его так, чтобы он охватывал все остальное содержимое. Создайте абсолютно позиционированный div с более высоким z-индексом, чем iframe, и разместите его где угодно (обычно в середине области просмотра).
• Поместите ваш "модальный" контент в этот div. Это может быть предварительно загружено, или вы можете требовать загрузки JavaScript и других ресурсов для его заполнения.
• Имейте некоторый элемент управления пользовательского интерфейса на div, который "закрывает" его, удаляя div и скрывая iframe.

Вы можете создавать очень богатые пользовательские интерфейсы с этим, который (может) иметь значительно лучший UX, чем принудительное использование нескольких окон. И у вас есть преимущество, заключающееся в том, что вы избегаете связи между окнами и потенциально предлагаете гораздо лучшее время отклика для пользователей, когда они «открывают» одно из этих окон.