CODEWITHSUNDEEP
javascriptphpjqueryhtml
user3691276
user3691276

Reputation: 25

My dialog box is opening for first time but not second time?

I've made my own dialog box using jQuery, it's working fine, everything fine, when first time it opens and close successfully, when i again try to open, but appears nothing? can you tell me what's wrong here?

Here is my source code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-1.11.0.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('a.dialog-window').click(function(){

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

                    $(signUpBox).fadeIn(500);

                     $('body').append('<div id="mask"></div>');
                     $('#mask').fadeIn(500);    
                        return false;
                    });

                    $('a.close_dialog_box').click(function(){
                        $('.dialog_box').fadeOut(400, function(){
                            remove();
                        });
                        return false;
                    });
                });
        </script>
        <style>
            .dialog_box{
                width: 70%;
                height: 70%;
                background-color: #520832;
                position: fixed;
                left: 15%;
                top: 15%;            
                -webkit-box-shadow: 0px 1px 15px 4px rgba(50, 50, 50, 1);
                -moz-box-shadow:    0px 1px 15px 4px rgba(50, 50, 50, 1);
                box-shadow:         0px 1px 15px 4px rgba(50, 50, 50, 1);
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
                display: none;
            }

            .close_dialog_box{
                position: fixed;
                right: 14%;
                top: 10%;
            }            
        </style>
    </head>
    <body>
        <a href="#dialog" class="dialog-window">Signup!!</a>

        <div id="dialog" class="dialog_box">
            <a href="#" class="close_dialog_box"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>

            <h2 style="color: #E2E2E2; font-family: Aileron, sans-serif; text-align: center;">Signup Now!</h2>

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

            </form>
        </div>
    </body>
</html>

Upvotes: 1

Views: 94

Answers (5)

ALENS AMSA
ALENS AMSA

Reputation: 11

use dialog box in try block. then use catch block to handle the execption. }

Upvotes: -2

AndrewPolland
AndrewPolland

Reputation: 3071

The line remove(); is completely removing the dialog box from the html and thus cannot be opened again as it no longer exists. Try removing the remove(); line from your code and it should work fine.

Upvotes: 0

Friedrich
Friedrich

Reputation: 2290

You can change

$('.dialog_box').fadeOut(400, function(){
    remove();
});

to

$('.dialog_box').fadeOut(400);

Here is a jsfiddle as well

Upvotes: 2

shabeer
shabeer

Reputation: 1064

Remove the function remove();

so the onclick code will be

$('a.close_dialog_box').click(function(){
                        $('.dialog_box').fadeOut(400, function(){
                            //no need of remove
                        });
                        return false;
                    });

Upvotes: 3

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

Remove the line remove(); from,

$('a.close_dialog_box').click(function(){
    $('.dialog_box').fadeOut(400, function(){
        remove(); <------ Remove this
    });
    return false;
});

Upvotes: 0

Related Questions