0

私がやろうとしているのは、クラス「.option」を持つボタンをクリックすると、ID「#dialog」を持つdivが表示され、クリックされたボタンにクラス.activeが追加されることです(おそらく後で別のダイアログを表示する複数のボタン) だけでなく、ボディにクラス ".noScroll" を追加します。ダイアログが表示されたら、「#dialog」div 内の div である「.dialogPage」ではなく、「#dialog」の任意の場所をクリックして閉じることができます。ダイアログが閉じられた場合、ボディとボタンに追加されたクラスは削除されます。

ダイアログを表示するためにクリックする必要があるボタンは次のとおりです。

<a class="option" href="edit_account.php">Your Account</a>

次の HTML は、ダイアログの構造を表しています。

<div id="dialog">
    <div id="dialogPage" class="dialogPage">
           <p>Edit your account here</p>
    </div>
</div>

関連する CSS は次のとおりです。

body {
    color: #4A4A4A;
    background-color: #F7F7F7;
    font-family: 'arial', sans-serif; 
    font-size: 0.95em;
    line-height: 150%;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    -webkit-overflow-scrolling: touch;  
    overflow-y: auto;
    overflow-x: hidden;
}

#dialog {
    display: none;
    background-color: rgba(25,30,37,0.95);
    width: 100%;
    position: fixed; 
    bottom:0; top: 0; left: 0; right: 0;    
    margin-top: 70px;
    z-index: 900;
    overflow-y: auto;
    overflow-x: hidden; 
}

    .dialogPage {
        background-color: #F7F7F7;
        border: 2px solid #ffffff;

        width: 900px; min-width: 900px; 
        padding: 20px;
        margin: 50px auto;  

        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;

        -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
        -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
        box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
    }


.noScroll {
    overflow-y: hidden;
    overflow-x: hidden; 
}

これは私が現在使用しているJavaScriptですが、間違っていると確信しているため、それを基に構築しないでください:

$(".option, #dialog").on('click', function() {
    $("#dialog").toggle(29);
    $("body").toggleClass("noScroll");

     if (e.target.id != 'dialogPage' && !$('#dialogPage').find(e.target).length) {
        $("#dialog").hide();
    }
});
4

1 に答える 1

0

次のことを試してください。

$('.option').click(function(e) {
    e.preventDefault();
    $('#dialog').show();
    $('body').addClass('noScroll');
    $(this).addClass('active');
    return false;
});

$('#dialog').click(function(e) {
    $(this).hide();
    $('body').removeClass('noScroll');
    $('.option').removeClass('active');
});

$('#dialogPage').click(function(e) {
    e.stopPropagation();
});

現在のコードではクラスの使用は見られなかった.activeので、それは単なる推測です。

デモ: http://jsfiddle.net/verashn/2Xh7d/

于 2013-11-12T18:08:02.453 に答える