Javascript 如何在新的URL中弹出一个窗口，但同时隐藏当前窗口并阻止单击（可能使用jQuery）
我通常习惯于“window.open”打开一个弹出窗口，进入一个新的URL。如何打开一个新的URL窗口，阴影/灰色显示当前窗口，并在关闭时删除阴影背景 最好使用jQuery来实现这一点吗？我可以在不使用jquery插件的情况下使用默认库吗 我想这样做，然后在卸载时“禁用”我的阴影。希望它使用核心jQuery库或标准javascript调用。我想避免使用jQuery以外的任何插件Javascript 如何在新的URL中弹出一个窗口，但同时隐藏当前窗口并阻止单击（可能使用jQuery）,javascript,jquery,Javascript,Jquery,我通常习惯于“window.open”打开一个弹出窗口，进入一个新的URL。如何打开一个新的URL窗口，阴影/灰色显示当前窗口，并在关闭时删除阴影背景 最好使用jQuery来实现这一点吗？我可以在不使用jquery插件的情况下使用默认库吗 我想这样做，然后在卸载时“禁用”我的阴影。希望它使用核心jQuery库或标准javascript调用。我想避免使用jQuery以外的任何插件 var popup = window.open('http://google.com', 'popup'); show
var popup = window.open('http://google.com', 'popup');
showShadow();
$(window).unload(function() {
if(!popup.closed) {
disableShadow();
}
});
试试jquery插件，比如fancybox，你也可以试试。。。
示例基本上，您需要将事件侦听器附加到新窗口以在网页中运行disableShadow（）函数 如果你把它添加到你的代码中，我认为它应该可以工作
popup.unload(function() { disableShadow() });
改编自：您应该使用
window.open（）窗口beforeuloadpopup = window.open('relative_url', 'popup');
$(popup).bind('beforeunload', function() {
disableShadow();
});
popup = window.open("", "name", "width=400, height=300")
popup.onbeforeunload = function() { $('#shadow').hide();}
请看这里的提示：您所需要的只是标准javascript函数。那么您的代码将如下所示
var url = 'http://google.com';
showShadow();
var optionalReturnValue = showModalDialog(url);
//Following code will be executed AFTER you return (close) popup window/dialog
hideShadow();
正如洪格尔所说，歌剧院不喜欢表演。当弹出窗口关闭时，它也不会在卸载之前启动。为了解决这个问题，您需要定时器（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);
}
$（“#popuptn”）。在（'click'，openPopup'）上//使用按钮打开弹出窗口
函数openPopup（）{
美元("封面")；
var left=（$（窗口）.width（）/2）-（200/2），
顶部=（$（窗口）.height（）/2）-（150/2），
pop=window.open（“，”弹出“，”宽度=400，高度=300，top=“+top+”，left=“+left”），
html=''；
html+=''；
html+=“我的弹出窗口”；
html+=''；
html+=“window.onbeforeunload=function（）{window.opener.fadeoutBG（）；}”；
html+=''；
html+=''；
html+=''；
html+=“欢迎使用我最优秀的弹出窗口！
”；
html+=“现在关闭我！”；
html+=''；
pop.document.write（html）；
}
window.fadeoutBG=function（）{//要从弹出窗口调用的函数
$（'封面'）。淡出（400）；
}
pop.close（）基本上，您可以在卸载前打开弹出窗口并设置该窗口。简而言之，是这样的：
popup = window.open('relative_url', 'popup');
$(popup).bind('beforeunload', function() {
disableShadow();
});
popup = window.open("", "name", "width=400, height=300")
popup.onbeforeunload = function() { $('#shadow').hide();}
为什么不直接使用jQuery UI呢？我知道您不需要另一个库，但它是jQuery的扩展，而不是另一个库，因为它可以在没有它的情况下生存。 它有大量的小部件，每一个都可以更改、配置。 什么是最好的，它可以与不同的主题查看，甚至你可以创建一个与他们的主题辊快速和容易，它可以模块化。只需在当前项目中获取所需内容。 看看这个：
它的使用非常简单。有了它，您可以打开带有不同url框架的模式对话框。在关闭事件中，您可以做任何您想做的事情。尝试使用模态类型，例如：使用Javascript创建新的弹出窗口是20世纪90年代的事，更不用说对用户不是很友好了。你所寻找的，无论是UI方面还是外观方面，都是一个模态对话框；关于如何创建模式对话框，有数以十亿计的示例和预先打包的jquery代码段，大多数客户端UI框架，如jquery UI、YUI和Bootstrap，都内置了模式对话框功能。我建议你试试这些颜色。试试颜色盒 它简单易用 快速示例：
<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>
$（文档）.ready（函数（）{
//如何将ColorBox事件指定给元素的示例
$（“.iframe”）.colorbox（{iframe:true，宽度：“80%”，高度：“80%”）；
});
- the trigger
- the shadow layer
- the modal box size and position
- add content to modal and display it along the shadow
<a href="http://jsfiddle.net" class="myModal" data-width="400" data-height="300">open url</a>
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
$（此）.myModal.on（“单击”）.on（）hreffunction 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>';
}
.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退出$(document).keyup(function(event) {
if (event.keyCode === 27) {
$("#modal, .shadow").remove();
}
}); //keyup
<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>