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 2window.onload = function(){     modal.style.display = "block";}$(document).ready(function(){$("#myModal").modal('show');});</script>

Answer 1

我想说艾森的回答在技术上是正确的。值得告知您为什么会发生这种情况。

看这里。

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

window.onload = function(){ 

    modal.style.display = "block";

}

注意变量modal。它是在您拥有的任何范围内定义的。

现在，请注意 window.onload 是另一个函数。这打破了模态变量的范围和可用性。

但是，您可以使用 Eisson 的答案。这将从上一个在 onload 函数之外无法访问的范围渲染中移除模式。

所以你可以做的是将上面提供的代码更改为

window.onload = () => { 

    modal.style.display = "block";

}

您可以在此资源上了解函数和箭头函数之间的一些技术差异。艾森和我自己的答案都可以。我的回答在您指定的范围内留下了模态，并且对您提供的样板进行了最低限度的更改。

Answer 2

这是工作：https ://codepen.io/elipio/pen/mdJgyYK

window.onload = function(e){   

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

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

  modal.style.display = "block";

}

问题是您必须在加载整个页面时使用这些方法。这发生在 window.onload 事件中。

希望这有帮助。