第一种方法:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Bootstrap(弹出框)</title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <h1>弹出框(Modal)</h1> <!-- 按钮触发弹出框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" onclick="btn()">弹出框(Modal)按钮</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"> <h5>内容</h5> <h5>内容</h5> <h5>内容</h5> <h5>内容</h5> </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="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> //按钮 function btn(){ //设置标题 $("#myModalLabel").text("TEST"); //显示内容 $("#myModal").modal("show"); } </script> </body> </html>
第二种方法(添加监听):
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Bootstrap(弹出框)</title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <h1>弹出框(Modal)</h1> <!-- 在 <button> 标签中,data-target="#myModal" 是您想要在页面上加载的模态框的目标。--> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">弹出框(Modal)按钮</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"> <h5>内容</h5> <h5>内容</h5> <h5>内容</h5> <h5>内容</h5> </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="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $(function(){ //在弹出框之前触发 $("#myModal").on("show.bs.modal",function(){ alert("内容回显操作!!!"); }); }); </script> </body> </html>
相关推荐
Bootstrap弹出框
Bootstrap弹出框水平居中,垂直居中
可拖拽的bootstrap弹出窗口结合jquery-ui实现的弹出和拖拽效果。
Bootstrap 弹出框(Popover)插件 弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图。如需激活弹出框,用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap ...
1.Bootstrap弹出框示例 <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">...
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要...一、Bootstrap弹出框 使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富。与jQue
主要介绍了Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
只提供了bootstrap弹出框样式 非常简洁
废话少说,切入正题,Bootstrap弹出框垂直居中的问题,因为我拿到的弹出框样式并非垂直居中,而是top 10%,但页面长了,就显得特别恶心。 解决方案如下所示: 1.在css里,找到 .modal.fade.in { top: 10%; } 这...
主要介绍了关于Bootstrap弹出框无法调用问题的解决办法的相关资料,需要的朋友可以参考下
主要介绍了bootstrap 弹出框modal添加垂直方向滚轴效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
比较了下Bootstrap的popover和一些其它的开源项目,觉得Bootstrap的还算不错。在使用过程中遇到了一系列问题,下面小编给大家分享Bootstrap弹出框(Popover)被挤压的问题小结,需要的朋友参考下吧
Bootstrap点击弹出层用户登录窗口模板基于Bootstrap3.3.5制作,简单实用。
Bootstrap弹出框插件,提供了一个扩展的视图,弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面。 弹出框(Popover)与工具提示(Tooltip)类似,提供了一个...
主要为大家详细介绍了Bootstrap实现弹出框和提示框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
好用的 js,bootstrap 城市弹出框
PopConfirm是一款基于bootstrap的jquery弹出层确认框插件。该jquery弹出层确认框插件兼容bootstrap2和bootstrap3。它能够使用bootstrap Popover来替代确认框功能,非常方便。