<!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>
<title></title>
<script type="text/javascript">
// ***
// Displays a non-sized non-modal popup
// ***
function popup(url) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(url, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1');");
}
// ***
// Displays a sized non-modal popup
// ***
function popupSized(url, width, height) {
day = new Date();
id = day.getTime();
xwidth = width;
xheight = height;
xleft = (screen.width - xwidth) / 2;
xtop = (screen.height - xheight) / 2;
eval("page" + id + " = window.open(url, '" + id + "', 'height=" + xheight + ",width=" + xwidth + ",left=" + xleft + ",top=" + xtop + ",toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0');");
}
// ***
// Displays a non-sized modal popup
// ***
function popupModal(url) {
day = new Date();
id = day.getTime();
windowOptions = 'edge: Raised; center: yes; resizable: no; maximize:no; minimize:yes; status: no; scroll: no; help: no';
var rc = window.showModalDialog(url, id, windowOptions);
return rc;
}
// ***
// Displays a sized modal popup
// ***
function popupModalSized(url, width, height) {
day = new Date();
id = day.getTime();
xwidth = width;
xheight = height;
xleft = (screen.width - width) / 2;
xtop = (screen.height - height) / 2;
windowOptions = 'dialogWidth:' + xwidth + 'px; dialogHeight:' + xheight + 'px; dialogLeft:' + xleft + 'px; dialogTop:' + xtop + 'px; edge: Raised; center: yes; resizable: no; maximize:no; minimize:yes; status: no; scroll: no; help: no';
var rc = window.showModalDialog(url, id, windowOptions);
return rc;
}
function btnSimplePopup_onclick() {
popup("http://www.google.com");
}
function btnPopupSized_onclick() {
popupSized("http://www.google.com", 200, 100);
}
function btnPopupModal_onclick() {
document.getElementById("txtPopupModal").value = popupModal("ModalPopup.htm");
}
function btnPopupModalSized_onclick() {
document.getElementById("txtPopupModalSized").value = popupModalSized("ModalPopup.htm", 300, 200);
}
</script>
</head>
<body>
<p>
<input id="btnPopup" type="button" value="Simple Popup" onclick="return btnSimplePopup_onclick()" /></p>
<p>
<input id="btnPopupSized" type="button" value="Sized Simple Popup" onclick="return btnPopupSized_onclick()" /></p>
<p>
<input id="btnPopupModal" type="button" value="Modal Popup" onclick="return btnPopupModal_onclick()" />
Return value
<input id="txtPopupModal" type="text" /></p>
<p>
<input id="btnPopupModalSized" type="button" value="Sized Modal Popup" onclick="return btnPopupModalSized_onclick()" />
Return value
<input id="txtPopupModalSized" type="text" /></p>
</body>
</html>
The second two popups open a window that sets the value of window.returnValue before closing itself using window.close so that the returned value is set on a text control. Here is the example code of "ModalPopup.htm":
<html>
<head>
<title>Modal Popup Window</title>
<script type="text/javascript">
function CloseWindow() {
window.returnValue = document.getElementById("txtReturn").value;
window.close();
}
</script>
</head>
<body>
Simple Modal Popup Page
<br />
<br />
Return text
<input id="txtReturn" type="text" /><br />
<br />
<input id="btnConfirm" type="button" value="Close" onclick="CloseWindow()" />
</body>
</html>
