Как реорганизовать использование window.open (...) в ненавязчивое модальное окно HTML? - PullRequest
Новая
       6

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

2 голосов
/ 24 октября 2008

У меня есть функция, которая запускает окно 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. Изменение должно быть максимально незаметным.

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

  1. Укажите дескриптор для «закрытия» окна.
  2. Убедитесь, что окно нельзя перемещать и оно расположено в центре экрана.
  3. Размытие фона в качестве опции.

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

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

Ответы [ 3 ]

3 голосов
/ 24 октября 2008

Вот мое решение с использованием библиотек 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 UI / Dialog .

2 голосов
/ 24 октября 2008

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

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

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

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

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

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

1 голос
/ 24 октября 2008

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

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

<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()
...