Javascript打开popup窗口并禁用父窗口
我想打开一个popup窗口并禁用父窗口。 以下是我正在使用的代码;
function popup() { popupWindow = window.open('child_page.html','name','width=200,height=200'); popupWindow.focus(); }
出于某种原因,父窗口不会被禁用。 我需要一些额外的代码或者是什么情况?
再次,我正在寻找类似于我们使用showModalDialog()时得到的东西。即它不允许select父窗口..唯一的事情是我想要使用window.open完成相同的事情
也请build议将跨浏览器兼容的代码..
var popupWindow=null; function popup() { popupWindow = window.open('child_page.html','name','width=200,height=200'); } function parent_disable() { if(popupWindow && !popupWindow.closed) popupWindow.focus(); }
然后在父窗口的body标签中声明这些函数
<body onFocus="parent_disable();" onclick="parent_disable();">
正如你在这里要求的是父窗口的完整的HTML代码
<html> <head> <script type="text/javascript"> var popupWindow=null; function child_open() { popupWindow =window.open('new.jsp',"_blank","directories=no, status=no, menubar=no, scrollbars=yes, resizable=no,width=600, height=280,top=200,left=200"); } function parent_disable() { if(popupWindow && !popupWindow.closed) popupWindow.focus(); } </script> </head> <body onFocus="parent_disable();" onclick="parent_disable();"> <a href="javascript:child_open()">Click me</a> </body> </html>
下面的new.jsp的内容
<html> <body> I am child </body> </html>
据我所知,你不能禁用浏览器窗口。
你可以做的是创build一个jQuery (或类似types的)popup窗口,当这个popup窗口出现你的父浏览器将被禁用。
在popup菜单中打开您的子页面。
这是我最终做到的! 你可以在你的身体上放置一个全尺寸的图层,当然这个图层是隐藏的。 当窗口打开时,您将使其可见,使其侧重于单击父窗口(图层),最后在打开的窗口closures或提交时消失。
.layer { position: fixed; opacity: 0.7; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 999999; background-color: #BEBEBE; display: none; cursor: not-allowed; }
并在身体层:
<div class="layout" id="layout"></div>
打开popup窗口的function:
var new_window; function winOpen(){ $(".layer").show(); new_window=window.open(srcurl,'','height=750,width=700,left=300,top=200'); }
保持新的重点:
$(document).ready(function(){ $(".layout").click(function(e) { new_window.focus(); } });
并在打开的窗口中:
function submit(){ var doc = window.opener.document, doc.getElementById("layer").style.display="none"; window.close(); } window.onbeforeunload = function(){ var doc = window.opener.document; doc.getElementById("layout").style.display="none"; }
我希望这会有所帮助:-)
关键术语是modal dialog。
因此,没有内置的模式对话框提供。
但是你可以使用许多其他的可用的例如这个
您好@anu贴的答案是正确的,但它不会按要求完全工作。 通过对child_open()函数进行轻微更改,它可以正常工作。
<html> <head> <script type="text/javascript"> var popupWindow=null; function child_open() { if(popupWindow && !popupWindow.closed) popupWindow.focus(); else popupWindow =window.open('new.jsp',"_blank","directories=no, status=no, menubar=no, scrollbars=yes, resizable=no,width=600, height=280,top=200,left=200"); } function parent_disable() { if(popupWindow && !popupWindow.closed) popupWindow.focus(); } </script> </head> <body onFocus="parent_disable();" onclick="parent_disable();"> <a href="javascript:child_open()">Click me</a> </body> </html>