Javascript 如何从使用window.open（…）重构为不引人注目的模态dhtml窗口？

我有一个启动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模式弹出窗口。这种变化应该尽可能不引人注目

<> P>为了保持这个解决方案与旧的解决方案相一致，我认为还需要做以下的

提供一个“关闭”窗口的手柄

确保车窗不能移动，并位于屏幕中央

模糊背景作为一个选项

我认为这是最接近我想要的，但我不明白如何把它结合起来

编辑：你们中的一些人给了我一个很好的线索。非常感谢。但让我在这里再次说明我的问题。我正在重新分解现有代码。我应该避免对当前的HTML或CSS进行任何更改。理想情况下，我希望通过保持genericPop（…）的函数签名相同来实现这种效果。

我使用它来做几乎相同的事情

如果我没记错的话，默认实现不支持调整对话框的大小。如果您不能仅使用一种尺寸，则可以修改代码或css以显示多个宽度

使用方便：

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

修改js以支持多种宽度：

添加宽度和高度作为显示对话框功能的属性，并将其设置为第68行的对话框和对话框内容元素，这需要原型

以下是我如何使用它：

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

现在，如果要关闭当前打开的弹出窗口，请执行以下操作：

Control.Modal.current.close()

---

下面是我使用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;
  });
});

---

.

这有一个问题。对话框的宽度和高度必须硬编码到css中。但我目前显示的对话框，其高度和宽度由调用方提供。我必须履行这一承诺。查看dialog_box.css中的第3行和第7行。您可以修改js。添加宽度和高度作为参数以显示对话框功能。把它们设置到第68Gene行的dialog和dialog内容元素，你能把这些信息添加到你的原始答案中吗，这样我就可以投票了？谢谢。请看我发布的链接中的代码。它是在那里定义的。你需要支持IE6吗？如果是这样的话，还有一个更复杂的问题，那就是在DHTML窗口下需要一个iframe垫片。Damir，参数“strName”是将显示在弹出窗口标题栏中的名称。也许，如果我在.attr（'id'，'dialog'）行后面的div中追加.attr（'title'，'strName'），就可以解决这个问题。谢谢，好的。在这种情况下，您可以在创建对话框时使用“标题”选项。我已经更新了示例。

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