如何觸發頁面加載模式

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: "inline" （或者您希望其顯示）。 注意：您必須先通過設置display: none隱藏模態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 ...

請注意， 最后一個選項是更好的選擇，因為它不引人注目並且被認為是更標准的。

如何觸發頁面加載模式

問題描述

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