使用JavaScript隐藏和显示对话框

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

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

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

以下是我当前使用的JavaScript，但请不要基于它构建，因为我确信它是错误的：

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

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

请尝试以下操作：

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

类的任何用法，所以这只是一个猜测

演示：

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

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

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