Pop-Up Div Using Jquery

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: 175px;
            width: 400px;
            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>

Jquery :-

<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
            loadPopupBox();

            $('#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>

ASPX CODE :-

<div id="popup_box">
            <h1>
                <table class="style1">
            <tr>
                <td>
                    <asp:Label ID="lblCountry" runat="server" Text="Country"></asp:Label>&nbsp;</td>
                <td>
                    <asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>&nbsp;</td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblState" runat="server" Text="State"></asp:Label>&nbsp;</td>
                <td>
                    <asp:TextBox ID="txtState" runat="server"></asp:TextBox>&nbsp;</td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblCity" runat="server" Text="City"></asp:Label>&nbsp;</td>
                <td>
                    <asp:TextBox ID="txtCity" runat="server"></asp:TextBox>&nbsp;</td>
            </tr>
            <tr>
                <td>
                    &nbsp;</td>
                <td>
                    <asp:Button ID="btnsa" runat="server" Text="Button" OnClientClick="save();" />&nbsp;</td>
            </tr>
        </table></h1>
            <a id="popupBoxClose">Close</a>
        </div>


POPUP DIV LOOK LIKE THIS :-