如何重构使用window.open（＆＃8230;）到一个不显眼的模态dhtml窗口？

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();
}

此功能在我的Web应用程序的不同位置被调用约52次。

我想重新考虑此代码以使用DHTML模式弹出窗口。这种变化应该尽可能不引人注目。

为了使此解决方案与旧解决方案保持一致，我认为还需要执行以下操作

1. 提供“关闭”的句柄窗口。
2. 确保窗口无法移动，并且位于屏幕中央。
3. 模糊背景作为选项。

我认为此解决方案是最接近我想要的，但我无法理解如何融入它。

编辑：你们中的一些人给了我很好的领导。谢谢。但是让我在这里重申我的问题。我正在重新考虑现有代码。我应该避免对目前的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 UI / Dialog的文档。

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