Question

i want make a popup window for login/signup.
so i’v written this code. but not working…

.css

#main_box
{
    border: 1px solid black;
    height: 300px;
    left: 34%;
    position: fixed;
    top: 32%;
    width: 300px;
}

#close_btn
{
    float: right;
}

#main_box
{
    display: none;
}

#box_a, #box_b
{
    float: left;
}

#box_a, #box_b, #box_c
{
    border: 1px solid black;
    height: 82px;
    width: 82px;
    margin: 10px;
}
</style>

.js

  <script type="text/javascript">
            $(document).ready(
        function () {
            $('#login_btn').click(
                    function () { $('#main_box').show(); }
                );       
            $('#forgt_p').click(
                    function () { $('#box_c').show(); }
                );    
            $('#close_btn').click(
                    function () { $('#main_box').hide(); }
                );
         }
         );
     </script>

.aspx

    <a href="javascript:;" id="login_btn">login</a>

    <div id="main_box">         

        <button id="close_btn" name="close">close</button>
        <div id="box_a">                      
            //////////////////////login code
        </div>

        <div id="box_b">
            //////////////////////signup code            </div>
        <div style="clear: left;"></div>
             <a href="javascript:;" id="forgt_p">forgot password</a>

        <div id="box_c">
             //////////////////////forgot password code
        </div>

</div>

also want to close this on pressing escape and make it smooth in working as much as it could by jquery

Answer 1

You should consider the amazing JQueryUI plugins like dialog

It permits to create CSS styled dialog boxes with plenty of options :

$(function() {
    $( "#dialog-message" ).dialog({
        modal: true,
        buttons: {
            Ok: function() {
                $( this ).dialog( "close" );
            }
        }
    });
});