单击按钮时不会显示 jQuery 模态

Question

我正在尝试创建一个模式窗口，当您单击导航栏中的登录按钮时会弹出该窗口。我已经做到了，所以模态和它的页面覆盖都在 css 中设置为 'display: none'。我已经尝试了所有可以让它在点击时显示的方法，但我就是无法让它工作。我试过 fadeIn()。我试过 .css() 来改变它。我什至尝试制作一个只有“display: none”并使用 .removeClass() 的特殊类。什么都没用!

这是一项学校作业，所以我不能使用 jQuery UI。我不是要求它为我完成。我只是想在正确的方向轻推。有人能帮我吗？这是我现在得到的代码。

$(document).ready(function() {
    $('#login').click(function(event) {
        event.preventDefault();
        $('.overlay').removeClass('.displaynone');
        $('.modal').removeClass('.displaynone');
    });
});

这是一个 JS Fiddle，其中包含整个情况。登录按钮应该调出叠加层和它上面的模态。我希望它淡入，最好是模态有第二次延迟。

fiddle :https://jsfiddle.net/duagdn8m/1/

Answer 1

您也在类名中添加 .。这不是必需的。这里不需要 . 符号:

$('.overlay').removeClass('displaynone');
$('.modal').removeClass('displaynone');

fiddle :https://jsfiddle.net/cnye843k/

我建议为登录屏幕提供一个 absolute 作为 position，使其成为模态。或者，如果您没有包含 CSS，那也没关系。