Bootstrap 的模态框
如果只想单独使用模态框功能, 可以单独引入 modal.JS, 和 Bootstrap 的 CSS, 在 Bootstrap 的包中, 可引入 Bootstrap.JS.
用法
通过 data 属性, 比如设置某个 butto 的 data-toggle='"modal", 同时设置 data-target="#myModal" 选择器内容,
通过 JS 直接用代码 $('#myModal').modal(options)
模态框主要为三部分, model-head,modeal-body,model-footer, 主要内容在 body 中显示, class="close" 为一个关闭模态框样式.
几个常用的方法 $('#identifier').modal('toggle') 切换模态框状态
$('#identifier').modal('show') 显示模态框
$('#identifier').modal('hide') 隐藏模态框
事件 | 作用 | 用法 |
---|---|---|
show.bs.modal | 在调用 show 方法后触发。 | $(’#myModal’).on(‘show.bs.modal’,function () {alert(“显示模态框”);}); |
shown.bs.modal | 在调用 show 方法后触发。 | $(’#myModal’).on(‘shown.bs.modal’, function () {alert(“完全显示模态框”); }); |
hide.bs.modal | 在调用 hide 方法后触发。 | $(’#myModal’).on(‘hide.bs.modal’, function () {alert(“隐藏模态框”);}); |
hidden.bs.modal | 在调用 hide 方法后触发。 | $(’#myModal’).on(‘hidden.bs.modal’, function () {alert(“完全隐藏模态框”); }); |
使用步骤两步
1, 按顺序引入以下三个文件
- <link rel="stylesheet" href="../css/bootstrap.min.css">
- <script sype="text/JavaScript" src="./jquery.min.js">
- </script>
- <script sype="text/JavaScript" src="../js/bootstrap.min.js">
- </script>
2, 在页面中 copy 下面的代码
- <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">×</button>
- <h4 class="modal-title text-center" id="myModalLabel"> 标题是什么 </h4>
- </div>
- <div class="modal-body">
写你 html 文本
- </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>
简单吧, 模态框就是需要一个触发, 在触发模态框的 HTML 元素加入以下属性 data-toggle="modal" data-target="#myModal"
观察以下就会发现 这个 data-target="#myModal" 中的 myModal 就是模态框所在 div 的 id <div class="modal fade" id="myModal".............>
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/framework/bootstrap/18232.html