如何触发页面加载模式

Question

I have this html modal that is triggered by the button click 我有此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>

I want to trigger the modal on page load instead of button click. 我想触发页面加载模式，而不是单击按钮。 How can I do this? 我怎样才能做到这一点？

Answer 1

if you're working with Bootstrap (then I also assume you're using jQuery ), it's as simple as the following in the html of the page you're loading. 如果您使用的是Bootstrap （然后，我还假设您使用的是jQuery ），则它与正在加载的页面html中的以下代码一样简单。

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

you could also just simulate a click on the modal trigger: 您也可以只模拟点击模式触发器：

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

of course, make sure this code comes after the markup with the modal. 当然，请确保此代码位于模态标记之后。 If that's not possible, you'll have to wrap it in a doc.ready like 如果不可能，则必须将其包装在doc.ready中，例如

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

or 要么

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

again, this assumes jQuery is assigned as $ in your code. 再次，这假设在您的代码中jQuery被分配为$ 。

Answer 2

This is in plain vanilla JavaScript. 这是普通的JavaScript。 If you put onload="callBack()" inside of your body tag, you can write a function to load the specific element (your modal in this case). 如果将onload="callBack()"放在body标记内，则可以编写一个函数来加载特定元素（在这种情况下为模态）。

There are a variety of ways to do this. 有多种方法可以做到这一点。 Most simply, you can select the element you want in a script tag and give it the style display: "inline" (or however you want it displayed). 最简单的是，您可以在script标签中选择所需的元素，并为其display: "inline"样式display: "inline" （或者您希望其显示）。 Note: you would have to make your modal hidden first by setting display: none 注意：您必须先通过设置display: none隐藏模态display: none

Example: 例：

body: 身体：

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

script: 脚本：

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

Hope this helps :) 希望这可以帮助：）

Answer 3

These solutions will work: 这些解决方案将起作用：

<body onload="script();">

or 要么

document.onload = function ...

or even 甚至

window.onload = function ...

Note that the last option is a better way to go since it is unobstrusive and is considered more standard . 请注意， 最后一个选项是更好的选择，因为它不引人注目并且被认为是更标准的。

如何触发页面加载模式

问题描述

3 个解决方案

解决方案1
0 已采纳 2018-10-23 03:10:23

解决方案2
0 2018-10-23 03:50:51

解决方案3
0 2018-10-23 04:24:32

如何触发页面加载模式

问题描述

3 个解决方案

解决方案1 0 已采纳 2018-10-23 03:10:23

解决方案2 0 2018-10-23 03:50:51

解决方案3 0 2018-10-23 04:24:32

解决方案1
0 已采纳 2018-10-23 03:10:23

解决方案2
0 2018-10-23 03:50:51

解决方案3
0 2018-10-23 04:24:32