PopUp Window

HTML Code:

<div id="popup_box">

        <!-- OUR PopupBox DIV-->

        <h1>This IS A Cool PopUp</h1>

        <a id="popupBoxClose">Close</a>

    </div>

    <div id="container">

        <!-- Main Page -->

        

        <a href="javascript:void(0);" id="idPopUp">Open PopUp Window</a>

    </div>

CSS:

<style type="text/css">
        /* popup_box DIV-Styles*/
        #popup_box {
            display: none; /* Hide the DIV */
            position: fixed;
            _position: absolute; /* hack for internet explorer 6 */
            height: 300px;
            width: 600px;
            background: #FFFFFF;
            left: 300px;
            top: 150px;
            z-index: 100; /*
                                Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
            margin-left: 15px; /* additional features, can be omitted */
            border: 2px solid #ff0000;
            padding: 15px;
            font-size: 15px;
            -moz-box-shadow: 0 0 5px #ff0000;
            -webkit-box-shadow: 0 0 5px #ff0000;
            box-shadow: 0 0 5px #ff0000;
        }

        #container {
            background: #d2d2d2; /*Sample*/
            width: 100%;
            height: 100%;
        }

        a {
            cursor: pointer;
            text-decoration: none;
        }
        /* This is for the positioning of the Close Link */

        #popupBoxClose {
            font-size: 20px;
            line-height: 15px;
            right: 5px;
            top: 5px;
            position: absolute;
            color: #6fa5e2;
            font-weight: 500;
        }

    </style>

Javascript:

 <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script type="text/javascript">
     
        $(document).ready(function () {
            // When site loaded, load the Popupbox First
         
            $('#idPopUp').click(function () { loadPopupBox(); return false; });
            $('#popupBoxClose').click(function () {
                unloadPopupBox();
            });
            $('#container').click(function () { unloadPopupBox(); });
            function unloadPopupBox() {
                // TO Unload the Popupbox  
                $('#popup_box').fadeOut("slow");
                $("#container").css({ // this is just for style        
                    "opacity": "1"
                });
            }
            function loadPopupBox() {    // To Load the Popupbox  
                $('#popup_box').fadeIn("slow");
                $("#container").css({ // this is just for style    
                    "opacity": "0.3"

                });
            }
        }); </script>