2

我有一个启动 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(...) 的函数签名相同来实现这种效果。

4

3 回答 3

3

这是我使用 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 的文档。

于 2008-10-24T12:49:02.467 回答
2

我使用这个对话框代码来做几乎相同的事情。

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

使用很简单：

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

修改js支持多种宽度：

添加宽度和高度作为属性以显示对话框功能，并将它们设置为第 68 行的对话框和对话框内容元素

于 2008-10-24T06:59:37.037 回答
1

试试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()
于 2008-10-24T07:20:15.840 回答