Question

我具有由按钮点击触发的html模式

<button type="button" class="btn btn-success mb-1" data-toggle="modal" data-target="#largeModal">
                          Large
                      </button>

<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" style="display: none;" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="largeModalLabel">Large Modal</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>
                                There are three species of zebras: the plains zebra, the mountain zebra and the Grévy's zebra. The plains zebra
                                and the mountain zebra belong to the subgenus Hippotigris, but Grévy's zebra is the sole species of subgenus
                                Dolichohippus. The latter resembles an ass, to which it is closely related, while the former two are more
                                horse-like. All three belong to the genus Equus, along with other living equids.
                            </p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary">Confirm</button>
                        </div>
                    </div>
                </div>
            </div>

我想触发页面加载模式，而不是单击按钮。我该怎么办？

Answer 1

如果您使用的是Bootstrap（那么我也假设您使用的是jQuery），则它与正在加载的页面html中的以下内容一样简单。

 $('#largeModal').modal({show: true});

您还可以仅模拟对模式触发器的点击：

$('.mb-1').trigger('click');

当然，请确保此代码位于模态标记的之后。如果不可能，则必须将其包装在doc.ready中，例如

 $(function(){
    $('#largeModal').modal({show: true});
 })

或

 $(function(){
    $('.mb-1').trigger('click');
 })

再次，这假设在您的代码中jQuery被分配为$。

Answer 2

这是普通的JavaScript。如果将onload="callBack()"放在body标签内，则可以编写一个函数来加载特定元素（在这种情况下为模态）。

有多种方法可以做到这一点。最简单的是，您可以在script标记中选择所需的元素，并为其指定样式display: "inline"（或根据需要显示）。注意：您必须先通过设置display: none

来隐藏模态

示例：

正文：

<body onload="callBack()">
   -elements here-
</body>

脚本：

<script>
    var callBack = function() {
        document.querySelector("#largeModal").style.display = "inline";
    }
</script>

希望这会有所帮助:)

Answer 3

这些解决方案将起作用：

<body onload="script();">

或

document.onload = function ...

甚至

window.onload = function ...

请注意，最后一个选择是一种更好的选择，因为它是unobstrusive并且是considered more standard。

如何触发页面加载模式

3 个答案: