[英]Automatically open modal on page load
Ok a bit more explanation for the title, i have a modal that was from a template I bought that only really showed how to open it with a button, but I want the modal to show upon page load.好的,对标题的更多解释,我有一个模态,它来自我购买的模板,它只真正展示了如何用按钮打开它,但我希望该模态在页面加载时显示。
The problem is it doesn't open upon page load using this code:问题是使用以下代码在页面加载时无法打开:
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName('close')[0];
// When the user clicks on the button, open the modal
$(window).on('load',function(){
modal.style.display = 'block';
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = 'none';
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = 'none';
}
}
</script>
please try this onload page请试试这个加载页面
<script type="text/javascript">
$(window).on('load',function(){
$('#myModal').modal('show');
});
</script>
use this html if...使用这个 html 如果...
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
hope above code will help you and below link will also helpful希望上面的代码对你有帮助,下面的链接也会有帮助
Launch Bootstrap Modal on page load 在页面加载时启动 Bootstrap Modal
thanks谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.