时间戳

首页 > 解决方案 > HTML/JS 模态加载

javascript - HTML/JS 模态加载

问题描述

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

在最好的情况下，我需要一个打开模式的计时器（例如，页面加载后 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>

标签： javascripthtmlcss

解决方案

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

看这里。

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

window.onload = function(){ 
    modal.style.display = "block";
}

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

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

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

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

window.onload = () => { 
    modal.style.display = "block";
}

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

箭头函数与函数

推荐阅读