Modal Popup With Jquery

<script type="text/javascript">

        $(document).ready(function () {

            //select all the a tag with name equal to modal

            $('a[name=modal]').click(function (e) {

                //Cancel the link behavior

                e.preventDefault();

                //Get the A tag

                var id = $(this).attr('href');

                //Get the screen height and width

                var maskHeight = $(document).height();

                var maskWidth = $(window).width();

                //Set heigth and width to mask to fill up the whole screen

                $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

                //transition effect                

                $('#mask').fadeIn(500);

                $('#mask').fadeTo("slow", 0.8);

                //Get the window height and width

                var winH = $(window).height();

                var winW = $(window).width();

                //Set the popup window to center

                $(id).css('top', winH / 2 - $(id).height() / 2 );

                $(id).css('left', winW / 2 - $(id).width() / 2);

                //transition effect

                $(id).fadeIn(500);

            });

            //if mask is clicked

            $('#mask').click(function () {

                $get("<%=txtUN.clientID %>").value = "";

                $get("<%=txtPass.clientID %>").value = "";

                $(this).fadeOut(500, '', 'slow');

                $('.window').fadeOut(500, '', 'slow');

            });

            // When close button clicked

            $('#Close').click(function (e) {              

                e.preventDefault();

                $get("<%=txtUN.clientID %>").value = "";

                $get("<%=txtPass.clientID %>").value = "";

                $get('MSG').innerHTML = "";

                $('#mask').fadeOut(500, '', 'slow');

                $('.window').fadeOut(500, '', 'slow');

            });

            // when browser resize

            $(window).resize(function () {

                var box = $('#boxes .window');

                //Get the screen height and width

                var maskHeight = $(document).height();

                var maskWidth = $(window).width();

                //Set height and width to mask to fill up the whole screen

                $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

                //Get the window height and width

                var winH = $(window).height();

                var winW = $(window).width();

                //Set the popup window to center

                box.css('top', winH / 2 - box.height() / 2 );

                box.css('left', winW / 2 - box.width() / 2);

            });

        });

    </script>

CSS

<style type="text/css">

        body{font-family: Verdana;font-size: 10pt;}

        a{color: #333;text-decoration: none;}

        a:hover{color: #ccc;text-decoration: none;}

        #mask{position: absolute;left: 0;top: 0;z-index: 9000;

                     background-color: #000;display: none;}

        #boxes .window{position: fixed;left: 0;top: 0;width: 440px;

                                  height: 200px;display: none;z-index: 9999;

                                   padding: 20px;}

        #boxes #dialog{width: 375px;height: 203px;padding: 10px;

                                  background-color: #ffffff;}

        #boxes #dialog1{width: 375px;height: 203px;}

        #dialog1 .d-login{float: left;width: 180px;height: 53px;margin-left: 109px;}

        .txtBox{height: 25px;margin: 10px;width: 200px;}

        .loginbtnC{background-image: url("Images/ImgCancel.jpeg");

                         border: medium none;height: 32px;width: 80px;}

        .loginbtnL{background-image: url("Images/loginImage.jpeg");}

    </style>

HTML

<div id="boxes">

                <!-- Start of Login Dialog -->

                <div id="dialog1" class="window" style="display: none;">

                    <fieldset style="background-color: #FFF; border-radius: 25px;

                                           -webkit-border-radius: 25px;">

                        <legend style="margin-left: 15px;"> LOGIN</legend>

                        <div style="padding-top: 10px; text-align: center;">

                            <span>UserName :</span>
                            <asp:TextBox ID="txtUN" CssClass="txtBox" runat="server"

placeholder="Enter UserName"></asp:TextBox>
     <br />

                            <span>Password :</span>

    <asp:TextBox ID="txtPass" CssClass="txtBox" runat="server"

                                placeholder="Enter Password"></asp:TextBox>

                        </div>

                        <div class="d-login">

                        <asp:Button runat="server" ID="btnLogin" CssClass="loginbtnC loginbtnL" />

                        <input id="Close" type="button" class="loginbtnC" />

                      </div>

                    </fieldset>

                </div>

                <!-- End of Login Dialog -->

                <!-- Mask to cover the whole screen -->

                <div id="mask">

                </div>

            </div>