Tuesday 10 July 2012

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>

No comments:

Post a Comment