HTML/JS 模态加载

Question

我的问题是我无法自动显示我的模态。

在最好的情况下，我需要一个打开模式的计时器（例如，页面加载后 10 秒）。

https://codepen.io/martin-len/pen/ExjJayx

<script>

// Working metods to open modal with button.

var modal = document.getElementById("myModal");

var btn = document.getElementById("myBtn");

btn.onclick = function() {

  modal.style.display = "block";

}

// And here im trying open modal automaticaly. All methods dont work.

// method 1

$(document).ready(function(){

modal.style.display = "block";

});

// method 2

window.onload = function(){ 

    modal.style.display = "block";

}

$(document).ready(function(){

$("#myModal").modal('show');

});

</script>

Answer 1

我想说艾森的回答在技术上是正确的。值得告知您为什么会发生这种情况。看这里。var modal = document.getElementById("myModal");window.onload = function(){&nbsp;&nbsp; &nbsp; modal.style.display = "block";}注意变量modal。它是在您拥有的任何范围内定义的。现在，请注意 window.onload 是另一个函数。这打破了模态变量的范围和可用性。但是，您可以使用 Eisson 的答案。这将从上一个在 onload 函数之外无法访问的范围渲染中移除模式。所以你可以做的是将上面提供的代码更改为window.onload = () => {&nbsp;&nbsp; &nbsp; modal.style.display = "block";}您可以在此资源上了解函数和箭头函数之间的一些技术差异。艾森和我自己的答案都可以。我的回答在您指定的范围内留下了模态，并且对您提供的样板进行了最低限度的更改。

Answer 2

这是工作：https ://codepen.io/elipio/pen/mdJgyYKwindow.onload = function(e){&nbsp; &nbsp;&nbsp; var modal = document.getElementById("myModal");&nbsp; var btn = document.getElementById("myBtn");&nbsp; modal.style.display = "block";}问题是您必须在加载整个页面时使用这些方法。这发生在 window.onload 事件中。希望这有帮助。