Skip to main content
 首页 » 编程设计

twitter-bootstrap之在页面加载时加载 Bootstrap 模式,无需触发按钮或使用 jQuery

2024年02月05日12jirigala

我正在尝试在页面加载时启动 Bootstrap 模式,而不触发 HTML 按钮或使用 jQuery。

这是我的代码:

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> 
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
 
<div id="my-modal" class="modal fade"> 
    <div class="modal-dialog"> 
        <div class="modal-content"> 
            <div class="modal-header"> 
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
                <h4 class="modal-title">Title</h4> 
            </div> 
            <div class="modal-body"> 
                Hello World! 
            </div> 
        </div> 
    </div>  
</div> 

这在您调用时起作用

$('#my-modal').modal('show'); 

但我不想调用方法或触发按钮。有没有办法在页面加载时自动启动模式?

演示:Fiddle

请您参考如下方法:

.modal创建一个CSS类并添加display:block。还将 in 类赋予模态 div。

<强> Working Demo

CSS

.modal { 
  display:block; 
} 

HTML

<div id="my-modal" class="modal fade in"> 

编辑:不知何故,默认关闭功能将不起作用,您需要为此添加自定义脚本。