How to automatically close a popup in JQuery when another popup is opened?

Question

I have 3 Jquery Pop-Up windows in a page. When I open one window say login popup, and then I open another say feedback popup, I need to get my login popup closed when I click on feedback popup link. Here is the sample code for my login popup. I used the same for feedback popup too. Please help me with my query. Thank you all in advance.

$(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;
    });

did you try this http://stackoverflow.com/questions/5274109/javascript-close-popup-open-new-window-redirect — btevfik, Mar 25 '13 at 05:07
Do provide us with your http://jsfiddle.net/ (HTML, CSS, jQuery and other libraries used) so that it's easier for us to look through your codes and help. — kyooriouskoala, Mar 25 '13 at 07:26
@btevfik I want the code in jquery so that I could write it with animation moves to my pop up. — vickythegme, Mar 27 '13 at 03:03
@btevfik I combined yours and other code that I searched here and did it somehow. But it seems I have to use .close() in every click(function()) for login, contact, feedback and my code seems lengthy. Its okay I got my answer. Thank you..!! — vickythegme, Mar 27 '13 at 03:44
WTF: http://stackoverflow.com/questions/22305641/how-can-i-debug-with-jquery-why-this-code-does-not-work/22305820#22305820 — epascarello, Mar 10 '14 at 16:36

score 2 · Answer 1 · answered Mar 25 '13 at 07:05

2

Add a common class to all the three pop ups. While showing a pop up hide the other popups first then show the current pop up.

<div class="popup1 popup">Menu</div>
<div class="popup2 popup">Login</div>
<div class="popup3 popup">FeedBack</div>

JS

$('a.login').click(function(){
    $('.popup').hide();
    ---- your code ----
});

answered Mar 25 '13 at 07:05

Venugopal

1,888
1
17
30

Thanks for your code. It worked. Before I had many lines to do it. Now it seems just a line in all the click() functions.Thank you. – vickythegme Mar 27 '13 at 03:49
@vickythegme, since you commented saying this answer worked, please let other users know by accepting the answer and upvoting the ones you like. It rewards the person who answered the question, and also makes it easier for people who have the same question to see the right answer quickly. It only takes a click of a button. Thank you for your time. – RoyalleBlue Jun 12 '13 at 22:18

score 0 · Answer 2 · answered Mar 25 '13 at 06:56

UPDATE: sorry forgot the other half of the jQuery, i fixed my answer now.

Im not so sure how to make your code you have work with what your trying to do, but heres a code snippet i use a lot in all of my projects, hope it helps you and many more.

        var first = true;
        var second = true;

    $(document).ready(function () {
            $(".signup").slideToggle();
            $(".login").slideToggle();
            $("#signup").toggleClass("active");
            $("#login").toggleClass("active");


            $("#signup").click(function () {

                $(".signup").slideToggle();
                first = true;
                $(this).toggleClass("active");
                if (!$("#login").hasClass('active')) {
                    $(".login").slideToggle();
                    second = false;
                    $("#login").toggleClass("active");
                }
                return false;
            });
            $("#login").click(function () {
                $(".login").slideToggle();
                second = true;
                $(this).toggleClass("active");

                if (!$("#signup").hasClass('active')) {
                    $(".signup").slideToggle();
                    first = false;
                    $("#signup").toggleClass("active");
                }
                return false;
            });
        });

and heres the HTML to that jQuery snippet of mine

    <div id="signup">
        Sign Up

    </div>
    <div class="signup">
        Email:<br>
        <input type="text">
        <br>
        Password:<br>
        <input type="password">
        <br>
        Verify Password:<br>
        <input type="password">
    </div>
    <div id="login">
        Login

    </div>
    <div class="login">
        Email:<br>
        <input type="email">
        <br>
        Password:<br>
        <input type="password">
    </div>

thanks for your answer. But I need to do it as a seperate kind of popup like appearance so that when I click on another link the opened one should close. Anyways let me try changing your code with popup. Thanks a lot.!! — vickythegme, Mar 27 '13 at 03:12

How to automatically close a popup in JQuery when another popup is opened?

2 Answers2