首页 > 代码库 > 多个按钮触发同一个Bootstrap自适应模态窗口
多个按钮触发同一个Bootstrap自适应模态窗口
在项目中可能会面对这样的一个场景：
界面上有多个按钮，我们希望点击这些按钮弹出同一个模态窗口，但希望模态窗口的内容是动态生成的，即，点击每个按钮弹出的模态窗口内容不同。
通常情况下，一个按钮对应一个模态窗口。
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><link href="http://www.mamicode.com/css/bootstrap.min.css" rel="stylesheet" /><script src="http://www.mamicode.com/Scripts/jquery-2.1.1.min.js"></script><script src="http://www.mamicode.com/js/bootstrap.min.js"></script><style type="text/css">body.modal-open,.modal-open .navbar-fixed-top,.modal-open .navbar-fixed-bottom {margin-right: 0;}.modal {top: 100px;bottom: auto;padding: 0;background-color: #ffffff;border: 1px solid #999999;border: 1px solid rgba(0, 0, 0, 0.2);border-radius: 6px;-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);background-clip: padding-box;}.modal.container {max-width: none;}</style></head><body><div class="content" style="margin-left: 100px;margin-top: 100px;"><button class="btn btn-primary btn-lg" data-toggle="modal" href="http://www.mamicode.com/#full-width">打开模态窗口</button></div><div id="full-width" class="modal container fade" tabindex="-1" style="display: none;"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title">标题</h4></div><div class="modal-body"><p>主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容</p></div><div class="modal-footer" style="text-align: center;"><button type="button" data-dismiss="modal" class="btn btn-default">关闭</button></div></div></body>
效果如下：
以上，通过data-toggle="modal" href="http://www.mamicode.com/#full-width"实现模态窗口。
现在，在页面上存在2个按钮：
<button class="btn btn-primary btn-lg">打开模态窗口1</button><button class="btn btn-primary btn-lg">打开模态窗口2</button>
我们希望点击每个按钮都弹出id为full-width的模态窗口，但模态窗口的标题为按钮的文本。
于是，需要通过Javascript的API来弹出模态窗口，并且，在弹出之前需要把按钮的文本赋值给模态窗口的标题。
$(function() {$(‘.content‘).on("click", "button", function () {$(‘#full-width .modal-header .modal-title‘).empty().text($(this).text());$(‘#full-width‘).modal();});});
完整如下：
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><link href="http://www.mamicode.com/css/bootstrap.min.css" rel="stylesheet" /><script src="http://www.mamicode.com/Scripts/jquery-2.1.1.min.js"></script><script src="http://www.mamicode.com/js/bootstrap.min.js"></script><style type="text/css">body.modal-open,.modal-open .navbar-fixed-top,.modal-open .navbar-fixed-bottom {margin-right: 0;}.modal {top: 100px;bottom: auto;padding: 0;background-color: #ffffff;border: 1px solid #999999;border: 1px solid rgba(0, 0, 0, 0.2);border-radius: 6px;-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);background-clip: padding-box;}.modal.container {max-width: none;}</style><script type="text/javascript">$(function() {$(‘.content‘).on("click", "button", function () {$(‘#full-width .modal-header .modal-title‘).empty().text($(this).text());$(‘#full-width‘).modal();});});</script></head><body><div class="content" style="margin-left: 100px;margin-top: 100px;"><button class="btn btn-primary btn-lg">打开模态窗口1</button><button class="btn btn-primary btn-lg">打开模态窗口2</button></div><div id="full-width" class="modal container fade" tabindex="-1" style="display: none;"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title">标题</h4></div><div class="modal-body"><p>主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容</p></div><div class="modal-footer" style="text-align: center;"><button type="button" data-dismiss="modal" class="btn btn-default">关闭</button></div></div></body>
效果如下：
多个按钮触发同一个Bootstrap自适应模态窗口
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。