Wednesday, June 29, 2011

JavaScript: Popups

This is a sample HTML that launches 4 different types of javascript popups, in the old style.

<!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()" />&nbsp;
        Return value
        <input id="txtPopupModal" type="text" /></p>
    <p>
        <input id="btnPopupModalSized" type="button" value="Sized Modal Popup" onclick="return btnPopupModalSized_onclick()" />
        &nbsp; 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>

No comments:

Post a Comment

Please use your common sense before making a comment, and I truly appreciate your constructive criticisms.