java script using PopUp window in asp.net

java script using PopUp window in asp.net

CSS Style:

<style type="text/css">

     #mask

        {

            display: none;

            background: #000;

            position: fixed;

            left: 0;

            top: 0;

            z-index: 10;

            width: 100%;

            height: 100%;

            opacity: 0.8;

            z-index: 999;

        }

      .login-popup

        {

            display: none;

            background: silver;

            padding: 10px;

            border: 2px solid #ddd;

            float: left;

            font-size: 1.2em;

            position: fixed;

            top: 50%;

            left: 50%;

            z-index: 99999;

            box-shadow: 0px 0px 20px #999; /* CSS3 */

            -moz-box-shadow: 0px 0px 20px #999; /* Firefox */

            -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */

            border-radius: 3px 3px 3px 3px;

            -moz-border-radius: 3px; /* Firefox */

            -webkit-border-radius: 3px; /* Safari, Chrome */

        }

        img.btn_close

        {

            position: ttheclosebuttonfloat:right;

            margin: -28px-28px00;

        }

        fieldset

        {

            border: none;

        }

        form.signin .textbox label

        {

            display: block;

            padding-bottom: 7px;

        }

        form.signin .textbox span

        {

            display: block;

        }

        form.signin p, form.signin span

        {

            color: #999;

            font-size: 11px;

            line-height: 18px;

        }

        form.signin .textbox input

        {

            background: #666666;

            border-bottom: 1px solid #333;

            border-left: 1px solid #000;

            border-right: 1px solid #333;

            border-top: 1px solid #000;

            color: #fff;

            border-radius: 3px 3px 3px 3px;

            -moz-border-radius: 3px;

            -webkit-border-radius: 3px;

            font: 13px Arial, Helvetica, sans-serif;

            padding: 6px 6px 4px;

            width: 200px;

        }

       

        form.signin input:-moz-placeholder

        {

            color: #bbb;

            text-shadow: 0 0 2px #000;

        }

        form.signin input::-webkit-input-placeholder

        {

            color: #bbb;

            text-shadow: 0 0 2px #000;

        }

       </style>

           -------------------------------------------------------------

       aspx:

   <script type="text/javascript" src="http://code.jquery.com/jquery-  

    1.6.4.min.js">

    </script>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"         

  type="text/javascript"></script>

  <script type="text/javascript" src="https://apis.google.com/js/plusone.js">

  <script type="text/javascript"  

     src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js">  

 </script>

   

href:

 <a href="#login-box" style="text-decoration: none; color: maroon; font-size: 

  13px"   class="login-window">Change Category</a>

<div id="login-box" class="login-popup">

  <form method="post" class="signin" action="#">

     <div style="width: 500px; height: 200px">

       <div style="background-color: #EB4495; margin: 5px; float: left; 

                border: solid 1px white;

                width: 480px">

        <span style="font-size: 20px; margin-top: 10px; margin-left: 10px; 

          float: left; height: 30px;color: White; font-family: Verdana">

         Update Your Search</span>

       <a href="#" class="close">

          <img style="float: right; border: none" width="40px" height="40px"  

                 src="/vendor/Image/Close.png"

              class="btn_close1" title="Close Window" alt="Close" /></a>

         </div>

         <table style="width: 500px; float: left; height: 180px">

            <tr>

                    <td style="font-family: tahoma; font-size: 13px; font-weight: bold; padding-left: 5px;

                        width: 100px; height: 25px">

                        Find :

                    </td>

                    <td style="font-family: tahoma; font-size: 13px; font-weight: bold; padding-left: 5px;

                        width: 340px; height: 25px">

                        <asp:DropDownList ID="drpBusinessCategory" runat="server" Width="300px">

                       <asp:ListItem Value="1">Flowers</asp:ListItem>

                          <asp:ListItem Value="1">Shirts</asp:ListItem>

                            </asp:DropDownList>

                    </td>

                </tr>

               <tr>

                    <td align="center" colspan="2">

                        <asp:ImageButton Style="margin-bottom: 20px" ID="btnSubmit" runat="server" ImageUrl="/vendor/Image/submit.png"

                            OnClick="btnSubmit_Click" />

                    </td>

                </tr>

            </table>

        </div>

        </form>

    </div>

              --------------------------------------------------------------

<script type="text/javascript">

//<![CDATA[

$(document).ready(function() {

$('a.login-window').click(function() {

//Getting the variable's value from a link

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

//Fade in the Popup

$(loginBox).fadeIn(300);

//Set the center alignment padding + border see css style

var popMargTop = ($(loginBox).height() + 24) / 2;

var popMargLeft = ($(loginBox).width() + 24) / 2;

$(loginBox).css({

'margin-top': -popMargTop,

'margin-left': -popMargLeft

});

// Add the mask to body

$('body').append('<div id="mask"></div>');

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

return false;

});

// When clicking on the button close or the mask layer the popup closed

$('a.close, #mask').live('click', function() {

$('#mask , .login-popup').fadeOut(300, function() {

$('#mask').remove();

});

return false;

});

}); //]]>

    </script>

            ----------------------------------------------------------

Screen: