Ilovephp.org - programming with passion

wait

Programming tutorials - Modal window (JavaScript)

I have lately noticed that certain web sites which open pop-ups having some windows if they aren't shut they don't allow to work in parent window from which they are opened, this windows are called modal windows.
They are very useful when you build certain applications web based or you want to make sure that users know what you want to communicate being unable to go back to the main page until they shut this pop-up.
Pay attention that the usual pop windows are more irritating at the moment they are opened. Think about it, when you enter a site how irritating it is to see more and more windows opening and even more than that this windows are modal. Certainly you will never go back to that page.
As i have already mentioned these windows are useful in web based applications in administration areas of the sites. Unfortunately you will face difficulties in building this windows as far as concerns the browser you have used. Internet Explorer interpretes correctly the modal windows by applying the method showModalDialog which has as parameter url of the page will open, name of the page and size width and height. Firefox browser uses a diferent method to declare this modal windows by using windows.open() to which we add common paramters and the modal parameter modal=yes. Unlike Internet Explorer, Firefox opens a non-modal window which stays above all windows but you can go back to parent window(main page).
You will understand this example better if you test it by yourself.

if (window.showModalDialog){
window.showModalDialog("http://www.google.com", "windowname", "dialogWidth:300px; dialogHeight:300px");
} else {
window.open('http://www.yahoo.com','windowname', 'height=300, width=300, toolbar=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, modal=yes');
}

First of all, will check if browser supports the opening of the modal pages with the help of the method window.showModalDialog if the browser used by us is Internet Explorer.
If you can't open the window using this method we will open it using window.open() if the browser used is Firefox will interpret the parameter modal=yes and will open a window which will stay above all the other windows. But if the browser used is not Firefox a non-modal window will open and the parameter modal=yes will be totally ignored.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Modal Window</title>
</head>
<body>
<script type="text/javascript">
function topWindow(){
if (window.showModalDialog){
window.showModalDialog("http://www.google.com", "windowname", "dialogWidth:300px; dialogHeight:300px");
} else {
window.open('http://www.yahoo.com','windowname', 'height=300, width=300, toolbar=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, modal=yes');
}
}
</script>
<a href="http://www.yahoo.com" target="windowname" onclick="topWindow(); return false;">Open a modal window</a>
</body>
</html>