有人可以帮助我吗，我试图在页面加载时加载模态框，但遇到了一些严重的问题。
<script>
$('#overlay').modal('show');
setTimeout(function() {
$('#overlay').modal('hide');
}, 5000);
</script>
</head>
<body>
<div class="modal fade" id="overlay">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Context here</p>
</div>
</div>
</div>
</div>
最佳答案
您必须将调用包装在准备好的文档中，以确保在页面完全加载后调用它，如下所示:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#overlay').modal('show');
setTimeout(function() {
$('#overlay').modal('hide');
}, 5000);
});
</script>
<body>
<div class="modal fade" id="overlay">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Context here</p>
</div>
</div>
</div>
</div>
</body>关于javascript - 页面打开时加载模态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44443052/