在窗口加载时打开Bootstrap 4弹出窗口,可以通过以下步骤实现:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
打开弹出窗口
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- 弹出窗口的内容 -->
<div class="modal-header">
<h5 class="modal-title">弹出窗口标题</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>这里是弹出窗口的内容。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#myModal').modal('show');
});
</script>
以上代码将在窗口加载完成后,通过调用Bootstrap的modal('show')方法来显示弹出窗口。
这样,在没有设置会话变量的情况下,当窗口加载时,会自动打开Bootstrap 4的弹出窗口。
领取专属 10元无门槛券
手把手带您无忧上云