bootstrap-模态弹出框
2017-05-27 09:59
429 查看
1.运行效果如图所示
![](https://s1.51cto.com/wyfs02/M01/97/13/wKiom1ko3ROSNlr2AABDphTjpcI899.png-wh_500x0-wm_3-wmp_4-s_4101961876.png)
2.实现代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>模态弹出框</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件(一般不用引入) --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">模态弹出窗</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span><span class="sr-only"> Close</span></button> <h4 class="modal-title">模态弹出窗标题</h4> </div> <div class="modal-body"> <p>模态弹出窗主体内容</p> </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> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
相关文章推荐
- Asp.net MVC利用Ajax.BeginForm实现bootstrap模态框弹出,并进行前段验证
- bootstrap模态框弹出和隐藏,动态改变中间内容的实例
- Bootstrap源码解读(第十一弹:模态弹出框)
- bootstrap之弹出框(模态框)的简单应用
- Bootstrap使用模态框modal实现表单提交弹出框
- 扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
- Bootstrap模态弹出框
- Asp.net MVC利用Ajax.BeginForm实现bootstrap模态框弹出,并进行前段验证
- bootstrap在一个模态框上弹出另一个模态框遮罩层问题
- Bootstrap4 模态框mode 提示框data-toggle="tooltip" 弹出框 data-toggle="popover"
- bootstrap模态框(弹出框),如何添加传参事件
- 使用bootstrap框架的模态框与ckeditor产生冲突,ckeditor的弹出窗不可用时的解决方法
- rails4使用bootstrap的模态框插件,结合ajax做出从弹出框选取内容返回给原页面的效果
- bootstrap弹出框被模态框遮挡
- bootstrap 模态框中弹出层 input不能获得焦点且不可编辑
- 像bootstrap模态框一样的弹出框怎么写?
- Bootstrap使用模态框modal实现表单提交弹出框
- bootstrap中的模态框(modal,弹出层)
- bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form
- 关于在bootstrap 弹出框上再弹出模态框的BUG?