javascript - jquery 模式淡入淡出问题

Question

我找到了一些在线制作模式的代码，但是当我尝试实现淡入淡出部分时，它只能工作一次并自动打开，除非我删除我的脚本部分。可能是什么问题呢？这是我的代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<h2>My Modal</h2>

<div id="fade" class="modal">
    <p>Thanks for clicking.</p>
    <a href="#" rel="modal:close">Close</a>
</div>

<p><a href="#fade" rel="modal:open">Open Modal</a></p>

<script>
    $("#fade").modal({
        fadeDuration: 200,
    });

</script>

Answer 1

适用于我的 Chrome 浏览器。顺便说一句，小部件文档可以在 https://jquerymodal.com/ 找到。

对话框自动打开的原因是 .modal() 函数打开了对话框。但请注意，带有属性的 anchor 元素的定义rel="modal:open" 附加一个处理程序，如果对话框处于关闭状态，则该处理程序在单击时打开对话框。因此，在代码中不需要调用 .modal() ，它会导致在加载页面时打开对话框。

要设置淡入淡出效果，您可以根据需要设置 $.modal.defaults 属性。我根据您的代码编译了一个工作示例 jsFiddle .