javascript - document.ready 时显示模式对话框

Question

我正在使用custombox jQuery 插件，我想在页面准备好时出现一个模式对话框。

这是我当前的代码(JS部分):

<script>
    $( document ).ready(function() {
        $.fn.custombox( this, {
            overlay: true,
            effect: 'blur',
            url:  '#modal'
        });
        e.preventDefault();
    });
</script>

这段代码(HTML 部分):

<div id="modal" style="display: none;" class="modal-example-content">
    <div class="modal-example-header">
        <button type="button" class="close" onclick="$.fn.custombox('close');">&times;</button>
        <h4>jQuery Custombox</h4>
    </div>
    <div class="modal-example-body">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

我不知道我做错了什么，我希望有人能告诉我如何让它发挥作用。

Answer 1

您必须传递正确的元素，而不是将“this”传递给函数。所以首先选择模态div。试试这个代码:

<script>
$( document ).ready(function() {

    var modal = document.getElementById('modal');

        $.fn.custombox( modal, {
            overlay: true,
            effect: 'blur',
            url:'#modal'
        });
    });
</script>