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_page.html','name','width=200,height=200');
popupWindow.focus();
}
For some reason, the parent window does not get disabled. Do I need some additional code OR what is the case?
Again, I am looking for something similar to what we get when we use showModalDialog()..i.e. it does not allow to select parent window at all..Only thing is I want to get the same thing done using window.open
Also please suggest the code which will be cross-browser compatible..
This question is related to
javascript
popup
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 :-)
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.
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
Source: Stackoverflow.com