浅析BootStrap中Modal（模态框）使用心得
98 浏览量
2020-11-30
10:09:42
上传
评论
收藏 59KB PDF 举报
浅析浅析BootStrap中中Modal（模态框）使用心得（模态框）使用心得
BootStrap中中Modal（模态框）描述（模态框）描述
Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实
用功能。您可以在 Modals（模态框）中使用 Popover（弹出框）和 Tooltip（工具提示插件）。
一、一、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"/>
<!--导入bootstrap.js包-->
<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>
<!-- 模态框（Modal） -->
<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">×</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><!-- /.modal-content -->
</div><!-- /.modal -->
</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框
$("#myModal").on("loaded.bs.modal",function{
//在模态框加载的同时做一些动作
});
资源评论
