已解决问题
谷歌a5260991用户在2017.05.23提交了关于“臭豆腐bootstrap模态框示例代码分享”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2024-11-06T22:12:19。希望大家能够帮助她。详细问题描述及疑问：期待您的答案，感谢你,我会记得你对我的好的 ！
bootstrap模态框示例代码分享
时间：2017.05.23 发布人：a5260991
谷歌a5260991用户在2017.05.23提交了关于“臭豆腐bootstrap模态框示例代码分享”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2024-11-06T22:12:19。希望大家能够帮助她。
希望以下的回答，能够帮助你。用户名：guiygtj3357
来自Ehtml><h编身石tmllang="zh-CN"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Comp上atible"content="IE=edge"><metaname="viewpor问答t"content="width=device-width,initial-scale=1,user-scalable=no"><title>XXX</title><linkrel="stylesheet"href="lib/bootstrap/css/bootstrap.c企销矿什侵范吧ss"><link训穿火河验厂解击rel="stylesheet"href="css/main.css"><!--[ifltIE9]><scriptsrc="lib/html5shiv/html5shiv.min.js"></script><scriptsrc="lib/re某构什消导兴听阿spond/respond.min.js"></script><![endif]--></head><body><!--默认隐藏--><!--模态框声明--><divcl派程油眼火点话ass="modal"><!-宁云硫施而渐镇流河特达-模态框窗口声明--><divclass="modal-dialog"><!-极且沙班实旧地查-内容声明--><divclass="modal-content">aaaaa</div></div></div><!--显示--><!--模态框声明--><!--<divclass="modalshow"><!–模态框窗口声明–><divclass="modal八搞首鲁计-dialog"><!–内容声明–><divclass="modal-content">aaaaa</div></div></div>--><!--显示,加上头，主体和底部--><!--模态框声明--><!--<divclass="modalshow"><!–模态框窗口声明–><d故良克刘白应ivclass="modal-dialog"><!–内容声明–><divclas己首些品胡山根容集s="modal-content"><divclass="modal-header">头</div><divclass="modal-body">主体</div><divclass="mod华速明师货讨al-footer">底部</div></div></div></div>--><!--不显示（点击按钮度歌河此满再显示）,加上头，主体和底部，加上其他内容--><!-四-模态框声明--><!--<divclass秋仍够义沿前样春="modal"id="myModal"tabindex="-1">--><!--加上tabindex后，点击ESC也能胜权毛期杨关闭模态框--><divclass="modalfade"id="myModal"tabindex="-1"><!--加上fade后具有淡入淡出效果--><!--模态框窗口声明--><!--<divclass="modal-dialog">--><divclass="modal-dialogmodal-lg"><!--可以调整大小--><!--内容声明--><divclass="modal-content"><divclass="modal-header"><!--关闭按钮--><buttonclass="close"data-di**iss="modal"><!--可以关闭模态框--><span>×</span></button><!--头部标题--><h4class="modal-title">登录</h4></div><divclass="modal-body"><!--<p>暂时无法注册</p>--><divclass="container-fluid"><!--在模态框主体部分还可以加入流体的栅格系统，一定是流体--><divclass="row"><divclass="col-lg-4col-md-4col-**-6">haha</div><divclass="col-lg-4col-md-4col-**-6">hehe</div><divclass="col-lg-4col-md-4col-**-6">heihei</div></div></div></div><divclass="modal-footer"><buttonclass="btnbtn-default">注册</button><buttonclass="btnbtn-primary">登录</button></div></div></div></div><!--需要指定模态框的id--><buttonclass="btnbtn-primary"data-toggle="modal"data-target="#myModal">点击出完整模态框</button><!--也可以使用方法a标签，data-target可以换成href--><aclass="btnbtn-primary"data-toggle="modal"href="#myModal">点击出完整模态框</a><!--data-backdrop默认是true，效果跟上面一样，如果是false,模态框背景无黑灰色，且点击空白处不会关闭模态框--><buttonclass="btnbtn-primary"data-toggle="modal"data-target="#myModal"data-backdrop="false">点击出完整模态框</button><!--data-backdrop默认是true，效果跟上面一样，如果是static,模态框背景有黑灰色，但是点击空白处不会关闭模态框--><buttonclass="btnbtn-primary"data-toggle="modal"data-target="#myModal"data-backdrop="static">点击出完整模态框</button><!--data-keyboard默认是true，即按Esc可以关闭模态框，如果是false,就不能关闭--><buttonclass="btnbtn-primary"data-toggle="modal"data-target="#myModal"data-keyboard="false">点击出完整模态框</button><!--href通过指定远程html文件即可远程加载内容到data-target="#myModal"模态框，远程中要加入header和footer--><buttonclass="btnbtn-primary"data-toggle="modal"data-target="#myModal"href="模态框远程.html">远程加载出完整模态框</button><!----><buttonclass="btnbtn-primary"id="btn">jQuery实现出完整模态框</button><scriptsrc="lib/jquery/jquery.js"></script><scriptsrc="lib/bootstrap/js/bootstrap.js"></script><scriptsrc="js/main.js"></script><script>$('#btn').on('click',function(){$('#myModal').modal('show');});//$('#myModal').modal({});如果不给参数，默认一打开浏览器就会出模态框$('#myModal').modal({show:false,/*如果不给参数，默认一打开浏览器就会出模态框,所以一开始不让它显示*//*其他参数跟上面按钮中data-后面的一样*/remote:'模态框远程.html'/*远程加载*/});$('#myModal').on('show.bs.modal',function(){alert('当模态框出现之前，触发该事件');});$('#myModal').on('shown.bs.modal',function(){alert('当模态框出现之后，触发该事件');});$('#myModal').on('hide.bs.modal',function(){alert('当模态框关闭之前，触发该事件');});$('#myModal').on('hidden.bs.modal',function(){alert('当模态框关闭之后，触发该事件');});$('#myModal').on('loaded.bs.modal',function(){alert('从远端的**源加载完**之后触发该事件');/*远程加载不是点击之后加载，默认页面加载完成后就已经加载好了*/});</script></body></html>
第1个回答
本文实例为大家分享了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。