如何重构使用window.open(…)到一个不显眼的模态dhtml窗口?
-
04-07-2019 - |
题
我有一个启动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模式弹出窗口。这种变化应该尽可能不引人注目。
为了使此解决方案与旧解决方案保持一致,我认为还需要执行以下操作
- 提供“关闭”的句柄窗口。
- 确保窗口无法移动,并且位于屏幕中央。
- 模糊背景作为选项。 醇>
我认为此解决方案是最接近我想要的,但我无法理解如何融入它。
编辑:你们中的一些人给了我很好的领导。谢谢。但是让我在这里重申我的问题。我正在重新考虑现有代码。我应该避免对目前的HTML或CSS进行任何更改。理想情况下,我希望通过保持genericPop(...)的函数签名相同来实现此效果。解决方案
这是我使用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以显示多个宽度。
用法很简单:
showDialog('title','content (can be html if encoded)','dialog_style/*4 predefined styles to choose from*/');
修改js以支持多个宽度:
添加宽度和高度作为属性以显示对话框功能,并将它们设置为第68行的对话框和对话框内容元素
尝试 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()
不隶属于 StackOverflow