Как изменить использование window.open (& # 8230;) для создания ненавязчивого модального окна HTML?

Question

У меня есть функция, которая запускает окно javascript, например, это

    function genericPop(strLink, strName, iWidth, iHeight) {
            var parameterList = "location=0,directories=0,status=0,menubar=0,resizable=no, scrollbars=no,toolbar=0,maximize=0,width=" + iWidth + ", height=" + iHeight;
            var new_window="";

            new_window = open(strLink, strName, parameterList);
            window.self.name = "main";
            new_window.moveTo(((screen.availWidth/2)-(iWidth/2)),((screen.availHeight/2)-(iHeight/2)));
            new_window.focus();
}

Эта функция вызывается примерно 52 раза из разных мест в моем веб-приложении.

Я хочу изменить этот код, чтобы использовать модальное всплывающее окно DHTML. Изменение должно быть максимально незаметным.

Чтобы сохранить это решение наравне со старым решением, я думаю, что также нужно сделать следующее

<Ол>

Укажите ручку для " Закрыть " окно.

Убедитесь, что окно не может быть перемещено и расположено в центре экрана.

Размытие фона как вариант.

Я подумал, что это решение наиболее близко к тому, что я хочу, но я не мог понять, как включить его.

Редактировать: Двое из вас дали мне хорошее руководство. Спасибо. Но позвольте мне переформулировать мою проблему здесь. Я перефакторинг существующего кода. Я должен избегать любых изменений в настоящем HTML или CSS. В идеале я бы хотел добиться этого эффекта, сохранив сигнатуру функции genericPop (...).

Answer 1

Вот мое решение с использованием библиотек jQuery и jQuery UI. Ваш API не изменен , но параметр 'name' игнорируется . Я использую iframe для загрузки содержимого из указанного strLink , а затем отображаю этот iframe как дочерний элемент для сгенерированного div , который затем преобразуется в модальное всплывающее окно с помощью jQuery:

function genericPop(strLink, strName, iWidth, iHeight) {
  var dialog = $('#dialog');
  if (dialog.length > 0) {
    dialog.parents('div.ui-dialog').eq(0).remove();
  }

  dialog = $(document.createElement('div'))
    .attr('id', 'dialog')
    .css('display', 'none')
    .appendTo('body');

  $(document.createElement('iframe'))
    .attr('src', strLink)
    .css('width', '100%')
    .css('height', '100%')
    .appendTo(dialog);

  dialog.dialog({ 
      draggable: false,
      modal: true, 
      width: iWidth,
      height: iHeight,
      title: strName,
      overlay: { 
          opacity: 0.5, 
          background: "black" 
      } 
  });
  dialog.css('display', 'block');
}

// example of use
$(document).ready(function() {
  $('#google').click(function() {
    genericPop('http://www.google.com/', 'Google', 640, 480);
    return false;
  });
  $('#yahoo').click(function() {
    genericPop('http://www.yahoo.com/', 'Yahoo', 640, 480);
    return false;
  });
});

Документация для пользовательского интерфейса / диалога jQuery .

Answer 2

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

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

использовать легко:

showDialog('title','content (can be html if encoded)','dialog_style/*4 predefined styles to choose from*/');

Изменение js для поддержки нескольких значений ширины:

Добавьте ширину и высоту в качестве атрибутов для отображения функции диалога и установите их для элементов диалога и содержимого диалога в строке 68

Answer 3

Попробуйте Control.Window , для которого требуется Prototype

Вот как я это использую:

<a href="/messages/new" class="popup_window">New Message</a>

И в моем файле Javascript:

$(document).observe("dom:loaded", function() {
  $("a.popup_window").each(function(element) {
    new Control.Modal(element, { overlayOpacity: 0.75, 
                                 className: 'modal',
                                 method: 'get',
                                 position: 'center' });
  });
});

Теперь, если вы хотите закрыть открытое в данный момент всплывающее окно, выполните:

Control.Modal.current.close()