Question

我要做的是当你点击一个具有“.option”类的按钮时，它会显示id为“#dialog”的div然后它会将类.active添加到单击的按钮上（可能有多个按钮，后面会显示不同的对话）以及将类“.noScroll”添加到正文中。当显示对话框时，可以通过单击“#dialog”上的任何位置来关闭它，而不是“.dialogPage”，它是“#dialog”div中的div。如果对话已关闭，则应删除已添加到正文和按钮的类。

以下是需要单击以显示对话框的按钮：

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

Answer 1

尝试以下方法：

$('.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/

使用JavaScript隐藏和显示对话框

1 个答案: