2

ページに 3 つの Jquery ポップアップ ウィンドウがあります。ログイン ポップアップの 1 つのウィンドウを開いてから、別のフィードバック ポップアップを開くと、フィードバック ポップアップ リンクをクリックしたときにログイン ポップアップを閉じる必要があります。これが私のログインポップアップのサンプルコードです。フィードバックポップアップにも同じものを使用しました。私の質問を手伝ってください。よろしくお願いします。

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

2 に答える 2

2

3 つのポップアップすべてに共通のクラスを追加します。ポップアップを表示している間、最初に他のポップアップを非表示にしてから、現在のポップアップを表示します。

<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 ----
});
于 2013-03-25T07:05:19.757 に答える
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;
            });
        });

そして、私のそのjQueryスニペットのHTMLをheres

    <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>
于 2013-03-25T06:56:39.367 に答える