2013-03-25 132 views
2

我在頁面中有3個Jquery彈出窗口。當我打開一個窗口說登錄彈出窗口,然後我打開另一個說反饋彈出窗口,我需要讓我的登錄彈出窗口關閉,當我點擊反饋彈出鏈接。 以下是我登錄彈出窗口的示例代碼。我也使用相同的反饋彈出窗口。請幫助我查詢。 謝謝大家提前。如何在另一個彈出窗口打開時自動關閉JQuery中的彈出窗口?

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

你試試這個http://stackoverflow.com/questions/5274109/javascript-close-popup-open-new-window-redirect – btevfik 2013-03-25 05:07:22

+0

向我們提供您的http://jsfiddle.net/(使用HTML,CSS,jQuery和其他庫),以便我們更輕鬆地查看代碼和幫助。 – kyooriouskoala 2013-03-25 07:26:52

+0

@btevfik我想在jQuery中的代碼,以便我可以用動畫寫入它,以彈出我的彈出窗口。 – vickythegme 2013-03-27 03:03:54

回答

0

更新:對不起忘了另一半的jQuery,我現在修復了我的答案。

我不太確定如何讓你的代碼與你想要做的工作有關,但是我的代碼片段在我的所有項目中都用了很多,希望它可以幫助你,還有更多。

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

和繼承人的HTML礦

<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> 
+0

感謝您的回答。但我需要將它作爲一種獨立的彈出式外觀​​,以便當我點擊另一個鏈接時,打開的鏈接應該關閉。反正讓我嘗試改變你的代碼彈出。非常感謝。!! – vickythegme 2013-03-27 03:12:17

2

的jQuery的片段添加一個公共類,所有三個彈出窗口。顯示彈出窗口時先隱藏其他彈出窗口,然後顯示當前彈出窗口。

<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 ---- 
}); 
+0

感謝您的代碼。有效。在我有很多線路要做之前。現在看起來只是所有click()函數中的一行。謝謝。 – vickythegme 2013-03-27 03:49:42

+0

@vickythegme,既然你評論說這個答案有效,請讓其他用戶知道答案,並提出你喜歡的答案。它可以獎勵回答問題的人,也可以讓具有相同問題的人更快地看到正確答案。它只需要點擊一個按鈕。感謝您的時間。 – RoyalleBlue 2013-06-12 22:18:46

相關問題