I want to open a popup window and disable the parent window. Below is the code that I am using;
function popup()
{
popupWindow = window.open(\'child_pag
The key term is modal-dialog.
As such there is no built in modal-dialog offered.
But you can use many others available e.g. this
Hi the answer that @anu posted is right, but it wont completely work as required. By making a slight change to child_open() function it works properly.
<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>
This is how I finally did it! You can put a layer (full sized) over your body with high z-index and, of course hidden. You will make it visible when the window is open, make it focused on click over parent window (the layer), and finally will disappear it when the opened window is closed or submitted or whatever.
.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;
}
and layer in the body:
<div class="layout" id="layout"></div>
function that opens the popup window:
var new_window;
function winOpen(){
$(".layer").show();
new_window=window.open(srcurl,'','height=750,width=700,left=300,top=200');
}
keeping new window focused:
$(document).ready(function(){
$(".layout").click(function(e) {
new_window.focus();
}
});
and in the opened window:
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";
}
I hope it would help :-)
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();
}
and then declare these functions in the body tag of parent window
<body onFocus="parent_disable();" onclick="parent_disable();">
As you requested here is the complete html code of the parent window
<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>
Content of new.jsp below
<html>
<body>
I am child
</body>
</html>
To my knowledge, you cannot disable the browser window.
What you can do is create a jQuery (or a similar kind of ) popup and when this popup appears your parent browser will be disabled.
Open your child page in popup.