关于BootStrap中Modal（模态框）使用心得

ゝ一纸荒年。 2022-06-18 04:11 310阅读 0赞

一、modal使用：

1.1、登录bootstrap官网，点击下载Bootstrap

1.2、导入对应的样式文件css

1.3、导入对应的js，需要导入bootstrap.js或者bootstrap.min.js文件，bootstrap的前提是[jQuery][]，所以我们要在导入bootstrap.js前面导入jquery.min.js

对应导入代码：

<link href="Bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>  
<link href="Bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />  
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet"/>  
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet"/>  
  
<script src="jquery/jquery-3.1.1.min.js"></script>  
<script src="Bootstrap/js/bootstrap.min.js"></script>

1.4、从官网找到一个案例使用：

<h2>创建模态框（Modal）</h2>  
  
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="\#myModal">开始演示模态框</button>  
  
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
   <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" id="myModalLabel">模态框（Modal）标题</h4>  
           </div>  
           <div class="modal-body">在这里添加一些文本</div>  
           <div class="modal-footer">  
               <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>  
               <button type="button" class="btn btn-primary">提交更改</button>  
           </div>  
       </div>  
   </div>  
</div>

二、modal打开：

2.1、静态打开：通过data属性打开隐藏模态框

设置按钮button的data-toggle:"modal"（以模态框的形式打开），data-target:"\#myModal"（设置为modal的id）

2.2、动态打开：以jquery代码为例

$("\#myModal").modal(\{

remote:"test/test.jsp";//可以填写一个url，会调用jquery load方法加载数据

backdrop:"static";//指定一个静态背景，当用户点击背景处，modal界面不会消失

keyboard:true;//当按下esc键时，modal框消失

\})

remote处可以填写jsp路径或者html路径，用来给modal框注入内容

2.3、动态打开事件：

在modal框加载同时，提供几个方法用来控制modal框