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小提琴，其中包含了整个情况。登录按钮应该在其上方显示叠加层和模态。我希望它能够淡入，最好是模态有第二次延迟。

小提琴：https://jsfiddle.net/duagdn8m/1/

Answer 1

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

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

小提琴：https://jsfiddle.net/cnye843k/

我建议为登录屏幕提供absolute position，以使其成为模态。或者，如果你没有包含CSS，那么很好。

Answer 2

https://jsfiddle.net/duagdn8m/5/ 只需删除。在您要删除的类名上。

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

Answer 3

您需要移除.中的removeClass('.displaynone');，overlay和modal是类，而不是ids。因此，您需要将css更新为.overlay和.modal。

此外，更容易将overlay和modal设置为display:none;，然后将fadeIn设置为两者，如下所示： -

$(document).ready(function() {
    $('#login').click(function(event) {
        event.preventDefault();
        $('.overlay, .modal').fadeIn(1000)
    });
});

这将为您提供1秒淡入。

Fiddle

单击按钮时，jQuery模式不会显示

3 个答案: