index.hmtl
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>模态框插件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body style="margin: 100px;"> <!--模态框声明 <div class="modal fade" id="myModal" tabindex="-1"> 窗口声明 <div class="modal-dialog modal-lg"> 内容声明 <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal"><span>×</span></button> <h4 class="modal-title">会员登陆</h4> </div> <div class="modal-body"> <div class="container-fluid"> <div class="row"> <div class="col-md-4">1</div> <div class="col-md-4">2</div> <div class="col-md-4">3</div> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-default">注册</button> <button class="btn btn-primary">登陆</button> </div> </div> </div> </div--> <!-- <btton class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">点击弹窗</btton> --> <!--模态框声明--> <!-- <div class="modal fade" id="myModal" tabindex="-1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> </div> </div> </div> --> <!-- <btton class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" href="content.html">点击弹窗</btton> --> <div class="modal fade" id="myModal" tabindex="-1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal"><span>×</span></button> <h4 class="modal-title">会员登陆</h4> </div> <div class="modal-body"> <div class="container-fluid"> <div class="row"> <div class="col-md-4">1</div> <div class="col-md-4">2</div> <div class="col-md-4">3</div> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-default">注册</button> <button class="btn btn-primary">登陆</button> </div> </div> </div> </div> <btton class="btn btn-primary btn-lg" id="btn">点击弹窗</btton> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $('#btn').on('click',function(){ $("#myModal").modal('show'); }); $('#myModal').modal({ show:false, remote:'content.html' }); $('#myModal').on('show.bs.modal',function(){ alert('当调用 show 方法时立即触发!'); }); $('#myModal').on('shown.bs.modal',function(){ alert('当弹窗完全出现再执行!'); }); $('#myModal').on('hide.bs.modal',function(){ alert('当调用 hide 方法时立即触发!'); }); $('#myModal').on('hidden.bs.modal',function(){ alert('当模态框完全关闭后触发'); }); $('#myModal').on('loaded.bs.modal',function(){ alert('当远程加载后触发'); }); </script> </body> </html>
content.html
<div class="modal-header"> <button class="close" data-dismiss="modal"><span>×</span></button> <h4 class="modal-title">远程加载</h4> </div> <div class="modal-body"> <div class="container-fluid"> <div class="row"> <div class="col-md-4">X</div> <div class="col-md-4">X</div> <div class="col-md-4">X</div> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-default">注册</button> <button class="btn btn-primary">登陆</button> </div>
效果图:
相关推荐
Bootstrap响应式模态登录框插件,jQuery基于Bootstrap制作的一款响应式模态登录框插件,点击遮罩弹出登录窗口代码。
ModalLayer是一款带多种形式的模态框插件,js网页弹出框代码,支持倒计时、确认对话框、弹窗iframe等。
bootstrapTable-model模态框可拖动代码
bsModal是一款基于Bootstrap4的动态生成模态窗口插件。bsModal可以在模态窗口中使用任何自定义内容,并且可以和cropper.js结合使用,在模态窗口中剪裁图片并上传服务器。
bootstrap模态框+jSignature签字版功能Demo jSignature 在网页上手写签名的插件(html5手写签名) 在IE7~IE8这种不支持HTML5的浏览器上,是利用Flash嵌入的方式实现的签名处理; 在支持的HTML5的浏览器上默认采用...
百度图片上传插件在bootstrap模态框中按钮失效解决方法!
Maven 基于SSM框架的增删改(使用了bootstrap的模态框,分页插件pagehelper, ajax等,附sql文件)
MultiStep是一款Bootstrap4 多步骤向导模态窗口插件。该插件可以基于bootstrap4 实现通过点击按钮,贷款模态窗口,在模态窗口中点击前进货后退按钮,进行步骤引导。
15种bootstrap模态框动画弹出特效 兼容性好 bootstrap
bootstrap的toast消息框插件,弹出特效,前端用例,bootstrap 插件
bootstrap model.js 单模态框的css,js
主要介绍了BootStrap点击保存后实现模态框自动关闭的思路(模态框),需要的朋友可以参考下
bootstrap模态框弹出效果是一款15种模态框弹出效果代码。
用原生JavaScript和CSS3共同实现bootstrap模态框效果。
Bootstrap-模态框- 解析: http://blog.csdn.net/yy228313/article/details/50763048
bootstrap模态框的15种不同的特效,很好爱的发声发呢嘎达股份的嘎嘎嘎德国阿嘎多哈哈地方深粉色发发斯蒂芬
这是一款非常实用的基于bootstrap的jQuery多功能模态对话框插件。该bootstrap jQuery模态对话框集警告框、确认框和对话框于一体。是一款不可多得的多功能、多用途的模态对话框插件。
今天我们选择使用著名的 bootstrap 库的模态框插件 modal.js 来实现模态框效果,同时也使大家进一步熟悉 bootstrap 的插件使用。 一. bootstrap 的 js 插件的简单介绍 1.引入 我们在使用 bootstrap 库时,引入的文件...
要用bootStrap这个框架就必须要重载它的class类,也就是说class要一样。接下来通过实例代码给大家介绍BootStrap的动态模态框及静态模态框,需要的朋友可以参考下