我通常习惯于“window.open”打开一个弹出窗口到一个新的 URL。如何在新 URL 中打开一个窗口，使当前窗口变暗/变灰，并在关闭时移除阴影背景。
最好使用jQuery来做到这一点？我可以在不使用 jquery 插件的情况下使用默认库吗？
我想做这样的事情，然后在卸载时“禁用”我的影子。希望使用核心 jQuery 库或标准 javascript 调用。我想避免使用除 jQuery 之外的任何插件。
var popup = window.open('http://google.com', 'popup');
showShadow();
$(window).unload(function() {
if(!popup.closed) {
disableShadow();
}
});
基本上，您可以打开弹出窗口并将该窗口设置为 beforeunload。简而言之，是这样的：
popup = window.open("", "name", "width=400, height=300")
popup.onbeforeunload = function() { $('#shadow').hide();}
我为你创造了一个小提琴。
所以你想用jQuery而不是使用现有的插件来构建你自己的模态框？...好吧，让我们玩吧（正如已经指出的那样，使用弹出窗口不是用户友好的解决方案）：
你的清单：
- the trigger
- the shadow layer
- the modal box size and position
- add content to modal and display it along the shadow
1）触发器是一个简单的html链接，用于打开modal里面的内容
<a href="http://jsfiddle.net" class="myModal" data-width="400" data-height="300">open url</a>
...我们将通过data-width和data-height(HTML5) 属性传递模态框的大小。
2）shadow图层是我们将在触发后附加到正文的html结构。我们可以在 js 变量中设置结构
var shadow = "<div class='shadow'></div>";
3）正如我们提到的，模态框的大小是通过data-*链接中的一些属性来设置的。我们需要做一些数学运算
var modalWidth = $(this).data("width");
var modalHeight = $(this).data("height");
var modalX = (($(window).innerWidth()) - modalWidth) / 2; // left position
var modalY = (($(window).innerHeight()) - modalHeight) / 2; // top position
注意：是我们稍后将进入方法$(this)的触发器选择器。BTW，该方法需要jQuery v1.7+.myModal.on("click").on()
4) 现在我们需要创建 modal 的 html 结构并传递内容href。我们将创建一个函数
function modal(url) {
return '<div id="modal"><a id="closeModal" title="close" href="javascript:;"><img src="http://findicons.com/files/icons/2212/carpelinx/64/fileclose.png" alt="close" /></a><iframe src="' + url + '"></iframe></div>';
}
...如您所见，我们的结构包含一个关闭按钮，用于移除模态层和阴影层。该函数在被调用时还获取一个参数 ( url)，该参数允许设置标签的src属性。iframe
注意：我们必须使用iframe标签来打开外部 url，但是在使用 iframe 时我们应该始终考虑相同的来源策略和其他安全限制。
所以现在，我们需要在单击.myModal触发器后将所有事件放在一起，它们将阴影和模态框都附加到正文中，并在单击关闭按钮时将其删除，因此
$(".myModal").on("click", function(e) {
e.preventDefault();
// get size and position
modalWidth = $(this).data("width");
modalHeight = $(this).data("height");
modalX = (($(window).innerWidth()) - modalWidth) / 2;
modalY = (($(window).innerHeight()) - modalHeight) / 2;
// append shadow layer
$(shadow).prependTo("body").css({
"opacity": 0.7
});
// append modal (call modal() and pass url)
$(modal(this.href)).appendTo("body").css({
"top": modalY,
"left": modalX,
"width": modalWidth,
"height": modalHeight
});
// close and remove
$("#closeModal").on("click", function() {
$("#modal, .shadow").remove();
});
}); // on
样式：当然我们需要一些基本的 CSS 样式来使我们的模态元素正常工作：
.shadow {width: 100%; height: 100%; position: fixed; background-color: #444; top: 0; left:0; z-index: 400}
#modal {z-index: 500; position: absolute; background: #fff; top: 50px;}
#modal iframe {width: 100%; height: 100%}
#closeModal {position: absolute; top: -15px; right: -15px; font-size: 0.8em; }
#closeModal img {width: 30px; height: 30px;}
*观看演示
奖励：您还可以绑定事件以使用键keyup关闭模式escape
$(document).keyup(function(event) {
if (event.keyCode === 27) {
$("#modal, .shadow").remove();
}
}); //keyup
最后注意：代码经过许多改进和优化，但它是许多灯箱所做的基本布局。我的最后一个建议：使用fancybox获得更高级的功能……有时不值得重新发明轮子；）
使用 Javascript 创建新的弹出窗口是如此 1990 年代，更不用说不是非常用户友好。您正在寻找的，无论是 UI 方面还是外观方面都是模态对话框；有数十亿个关于如何创建模态对话框的示例和预打包的 jquery 片段，并且大多数客户端 UI 框架（如 jQuery UI、YUI 和 Bootstrap）都内置了模态对话框功能。我建议深入研究这些。
试试jquery插件，比如fancybox http://fancybox.net/
基本上，您需要将一个事件侦听器附加到您的新窗口以在您的网页中运行 disableShadow() 函数。
如果您将此添加到您的代码中，我认为它应该可以工作。
popup.unload(function() { disableShadow() });
您应该使用调用返回的实例的beforeUnload事件，如下所示：windowwindow.open()
popup = window.open('relative_url', 'popup');
$(popup).bind('beforeunload', function() {
disableShadow();
});
请注意，URL 必须在同一个域中，以便打开器窗口与弹出窗口交互！
在这里查看小提琴：http: //jsfiddle.net/hongaar/QCABh/
您所需要的只是标准的 javascript 函数showModalDialog。然后你的代码看起来像
var url = 'http://google.com';
showShadow();
var optionalReturnValue = showModalDialog(url);
//Following code will be executed AFTER you return (close) popup window/dialog
hideShadow();
更新 正如 hongaar 所说，Opera 不喜欢 showModalDialog。当弹出窗口关闭时，它也不会在（之前）卸载时触发。要解决此问题，您需要计时器 (window.setTimeout) 来定期检查窗口是否仍然存在。更多详情请看这里
您可以打开一个新窗口，当它关闭时，您可以在打开窗口中执行一个功能。
我将通过将脚本直接写入新窗口来做一个简单的示例，但如果为弹出窗口提供了链接，您也可以将其包含在用于新窗口的 HTML 中：
$("#popupBtn").on('click', openPopup); //using a button to open popup
function openPopup() {
$('#cover').fadeIn(400);
var left = ($(window).width()/2)-(200/2),
top = ($(window).height()/2)-(150/2),
pop = window.open ("", "popup", "width=400, height=300, top="+top+", left="+left),
html = '<!DOCTYPE html>';
html += '<head>';
html += '<title>My Popup</title>';
html += '<scr'+'ipt type="text/javascript">';
html += 'window.onbeforeunload = function() { window.opener.fadeoutBG(); }';
html += '</sc'+'ript>';
html += '</head>';
html += '<body bgcolor=black>';
html += '<center><b><h2 style="color: #fff;">Welcome to my most excellent popup!</h2></b></center><br><br>';
html += '<center><b><h2 style="color: #fff;">Now close me!</h2></b></center>';
html += '</body></html>';
pop.document.write(html);
}
window.fadeoutBG = function() { //function to call from popup
$('#cover').fadeOut(400);
}
使用淡入的固定封面也将阻止对页面上元素的任何点击，您甚至可以将点击处理程序附加到封面，pop.close()以在点击封面时关闭弹出窗口，就像如果您点击模态框会关闭一样在它之外。
从弹出窗口调用父页面上的函数的优点之一是可以将值从弹出窗口传递到父页面，并且您可以做很多其他方式做不到的事情。
为什么不直接使用 jQuery UI？我知道您不想要另一个库，而是 jQuery 的扩展而不是另一个库，因为它可以在没有它的情况下生存。它有很多小部件，每个小部件都可以更改、配置。最好的是它可以查看不同的主题，甚至您可以使用主题滚轮快速轻松地创建一个，并且可以模块化。只需在当前项目中获取您需要的东西。看一下这个：
http://jqueryui.com/dialog/#modal-form
使用起来真的很简单。有了这个，您可以打开带有框架的模态对话框到不同的 url。在关闭事件中，您可以做任何您想做的事情。
试试彩盒
它简单易用
http://www.jacklmoore.com/colorbox
快速示例：
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
});
</script>
<a class='iframe' href="http://google.com">Outside Webpage (Iframe)</a>
你也可以试试这个... http://fancyapps.com/fancybox/
这里的例子
在模态类型中尝试http://thickbox.net/ ，示例：http ://thickbox.net/#examples
我也这样做了。
首先，一些 URL 在（iframe）模式窗口中根本不起作用；我不能说它是否可以在浏览器支持的本机模式窗口中工作，因为我还没有尝试过。在 iframe 中加载 google 或 facebook，看看会发生什么。
其次，诸如 window onunload 事件之类的事情并不总是会触发（正如我们已经看到的一些人）。
接受的答案版本也仅适用于静态页面。任何重新加载（甚至是页面上的 F5）都会导致阴影隐藏。 由于我无法对已接受的答案发表评论，因此我至少希望其他任何查看这些结果的人都知道这一点。
过去我采取了一种技术含量较低的方法来解决这个问题：轮询。
<html>
<head>
<script type="text/javascript">
function openWindow(url)
{
var wnd = window.open(url);
var timer = null;
var poll = function()
{
if(wnd.closed) { alert('not opened'); clearInterval(timer); }
};
timer = setInterval(poll, 1000);
}
</script>
</head>
<body>
<a href="#" onclick="openWindow('http://www.google.com'); return false;">click me</a>
</body>
</html>
有关示例，请参见上面的链接。我在 IE、FF 和 Chrome 中进行了测试。我的计时器是每 1 秒一次，但是浏览器上的工作量非常低，如果你想让它感觉更即时，你可以轻松地将其降低到 100 毫秒左右。
在这个例子中你所要做的就是，在调用 window.open 之后，调用你的“显示阴影”函数，而不是在你关闭时发出警报，调用你的“隐藏阴影”函数，它应该可以实现你正在寻找的东西.