0

我想要做的是，当您单击具有“.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();
    }
});
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 回答