在项目中可能会面对这样的一个场景：

界面上有多个按钮，我们希望点击这些按钮弹出同一个模态窗口，但希望模态窗口的内容是动态生成的，即，点击每个按钮弹出的模态窗口内容不同。

通常情况下，一个按钮对应一个模态窗口。

  1. <head>
  2.  
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.  
  5.     <title></title>
  6.  
  7.     <link href="css/bootstrap.min.css" rel="stylesheet" />
  8.  
  9.     <script src="Scripts/jquery-2.1.1.min.js"></script>
  10.  
  11.     <script src="js/bootstrap.min.js"></script>
  12.  
  13.     <style type="text/css">
  14.  
  15.         body.modal-open,
  16.  
  17.         .modal-open .navbar-fixed-top,
  18.  
  19.         .modal-open .navbar-fixed-bottom {
  20.  
  21.             margin-right: 0;
  22.  
  23.         }
  24.  
  26.         .modal {
  27.  
  28.             top: 100px;
  29.  
  30.             bottom: auto;
  31.  
  32.             padding: 0;
  33.  
  34.             background-color: #ffffff;
  35.  
  36.             border: 1px solid #999999;
  37.  
  38.             border: 1px solid rgba(0, 0, 0, 0.2);
  39.  
  40.             border-radius: 6px;
  41.  
  42.             -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  43.  
  44.             box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  45.  
  46.             background-clip: padding-box;
  47.  
  48.         }
  49.  
  51.         .modal.container {
  52.  
  53.             max-width: none;
  54.  
  55.         }
  56.  
  57.     </style>
  58.  
  59. </head>
  60.  
  61.     <body>
  62.  
  63.         <div class="content" style="margin-left: 100px;margin-top: 100px;">
  64.  
  65.             <button class="btn btn-primary btn-lg" data-toggle="modal" href="#full-width">打开模态窗口</button>
  66.  
  67.         </div>
  68.  
  70.         <div id="full-width" class="modal container fade" tabindex="-1" style="display: none;">
  71.  
  72.             <div class="modal-header">
  73.  
  74.                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  75.  
  76.                 <h4 class="modal-title">标题</h4>
  77.  
  78.             </div>
  79.  
  80.             <div class="modal-body">
  81.  
  82.                 <p>
  83.  
  84.                     主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
  85.  
  86.                 </p>
  87.  
  89.             </div>
  90.  
  91.             <div class="modal-footer" style="text-align: center;">
  92.  
  93.                 <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
  94.  
  95.             </div>
  96.  
  97.         </div>
  98.  
  99.     </body>
  100.  


效果如下：


以上，通过data-toggle="modal" href="#full-width"实现模态窗口。


现在，在页面上存在2个按钮：


  1. <button class="btn btn-primary btn-lg">打开模态窗口1</button>
  2.  
  3. <button class="btn btn-primary btn-lg">打开模态窗口2</button>


我们希望点击每个按钮都弹出id为full-width的模态窗口，但模态窗口的标题为按钮的文本。


于是，需要通过Javascript的API来弹出模态窗口，并且，在弹出之前需要把按钮的文本赋值给模态窗口的标题。


  1.         $(function() {
  2.  
  3.             $('.content').on("click", "button", function () {
  4.  
  5.                 $('#full-width .modal-header .modal-title').empty().text($(this).text());
  6.  
  7.                 $('#full-width').modal();
  8.  
  9.             });
  10.  
  11.         });


完整如下：


  1. <head>
  2.  
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.  
  5.     <title></title>
  6.  
  7.     <link href="css/bootstrap.min.css" rel="stylesheet" />
  8.  
  9.     <script src="Scripts/jquery-2.1.1.min.js"></script>
  10.  
  11.     <script src="js/bootstrap.min.js"></script>
  12.  
  13.     <style type="text/css">
  14.  
  15.         body.modal-open,
  16.  
  17.         .modal-open .navbar-fixed-top,
  18.  
  19.         .modal-open .navbar-fixed-bottom {
  20.  
  21.             margin-right: 0;
  22.  
  23.         }
  24.  
  26.         .modal {
  27.  
  28.             top: 100px;
  29.  
  30.             bottom: auto;
  31.  
  32.             padding: 0;
  33.  
  34.             background-color: #ffffff;
  35.  
  36.             border: 1px solid #999999;
  37.  
  38.             border: 1px solid rgba(0, 0, 0, 0.2);
  39.  
  40.             border-radius: 6px;
  41.  
  42.             -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  43.  
  44.             box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  45.  
  46.             background-clip: padding-box;
  47.  
  48.         }
  49.  
  51.         .modal.container {
  52.  
  53.             max-width: none;
  54.  
  55.         }
  56.  
  57.     </style>
  58.  
  59.     <script type="text/javascript">
  60.  
  62.         $(function() {
  63.  
  64.             $('.content').on("click", "button", function () {
  65.  
  66.                 $('#full-width .modal-header .modal-title').empty().text($(this).text());
  67.  
  68.                 $('#full-width').modal();
  69.  
  70.             });
  71.  
  72.         });
  73.  
  74.     </script>
  75.  
  76. </head>
  77.  
  78.     <body>
  79.  
  80.         <div class="content" style="margin-left: 100px;margin-top: 100px;">
  81.  
  82.             <button class="btn btn-primary btn-lg">打开模态窗口1</button>
  83.  
  84.             <button class="btn btn-primary btn-lg">打开模态窗口2</button>
  85.  
  86.         </div>
  87.  
  89.         <div id="full-width" class="modal container fade" tabindex="-1" style="display: none;">
  90.  
  91.             <div class="modal-header">
  92.  
  93.                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  94.  
  95.                 <h4 class="modal-title">标题</h4>
  96.  
  97.             </div>
  98.  
  99.             <div class="modal-body">
  100.  
  101.                 <p>
  102.  
  103.                     主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
  104.  
  105.                 </p>
  106.  
  108.             </div>
  109.  
  110.             <div class="modal-footer" style="text-align: center;">
  111.  
  112.                 <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
  113.  
  114.             </div>
  115.  
  116.         </div>
  117.  
  118.     </body>
  119.  


效果如下：


												


											
多个按钮触发同一个Bootstrap自适应模态窗口的更多相关文章
	

    
								
  1. 使用jQuery和Bootstrap实现多层、自适应模态窗口
		
    本篇实践一个多层模态窗口,而且是自适应的. 点击页面上的一个按钮,弹出第一层自适应模态窗口. 在第一层模态窗口内包含一个按钮,点击该按钮弹出第二层模态窗口,弹出的第二层模态窗口会挡住第一层模态窗口,即 ...
    
		
    2. 
						
  2. bootstrap 自定义模态窗口
		
    $(".classname").click(function () { $('#mymodel').modal('show'); alert('模态框打开了'); }); $('# ...
    
		
    3. 
						
  3. BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）
		
    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
    
		
    4. 
						
  4. bootstrap 模态窗口 多重/多个弹窗滚动条补丁
		
    由于bootstrap的模态窗口默认不支持多次弹出, 在关闭的时候会有滚动条消失的问题. 经过观察和查看源码, 发现在开启和关闭的时候会在body上增加/减少一个"modal-open&qu ...
    
		
    5. 
						
  5. WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法
		
    由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...
    
		
    6. 
						
  6. Bootstrap 实例 - 模态框（Modal）插件
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    7. 
						
  7. bootstrap的模态框
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    8. 
						
  8. layui实现类似于bootstrap的模态框功能
		
    以前习惯了bootstrap的模态框,突然换了layui,想的用layui实现类似于bootstrap的模态框功能. 用到了layui的layer模块,例如: <!DOCTYPE html> ...
    
		
    9. 
						
  9. Bootstrap使用模态框modal实现表单提交弹出框
		
    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Android sdk安装目录中没有platform-tools目录问题详解
			
    sdk下载地址 http://tools.android-studio.org/index.php/sdk 安装步骤很简单,百度即可. 下面详细说一下,在安装中遇到android sdk下没有plat ...
    
			
    2. 
						
  2. Robotium_断言方法assert、is、search
			
    下面的这些方法都主要用来判断测试结果是否与预期结果相符,一般把is和search方法放在assert里面判断.assert最常用的还是assertThat方法,是Junit的判断,这里就不多说了.断言 ...
    
			
    3. 
						
  3. 001_软件waf
			
    一.优秀的软件waf开源软件 <1>openwaf介绍  http://www.oschina.net/p/openwaf http://git.oschina.net/miracleqi ...
    
			
    4. 
						
  4. Java编程的逻辑 (65) - 线程的基本概念
			
    ​本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...
    
			
    5. 
						
  5. HBase0.99.2集群的搭建步骤（在hadoop2.6.4集群和zookeeper3.4.5集群上）
			
    HBase介绍(NoSql,不是关系型数据库) HBase是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBASE技术可在廉价PC Server上搭建起大规模结构化存储集群. HBase ...
    
			
    6. 
						
  6. CSS transform中的rotate的旋转中心怎么设置
			
    transform-origin属性 默认情况,变形的原点在元素的中心点,或者是元素X轴和Y轴的50%处.我们没有使用transform-origin改变元素原点位置的情况下,CSS变形进行的旋转.移 ...
    
			
    7. 
						
  7. js冲刺一下
			
    js中__proto__和prototype的区别和关系 1.对象有属性__proto__,指向该对象的构造函数的原型对象. 2.方法除了有属性__proto__,还有属性prototype,prot ...
    
			
    8. 
						
  8. Ajax json交互和SpringMVC中@RequestBody
			
    Ajax json交互和SpringMVC中@RequestBody 标签: 背景 自己提供出去得接口中参数设置为@RequestBody VipPromotionLog vipPromotionLo ...
    
			
    9. 
						
  9. join方法的使用
			
    在上面的例子中多次使用到了Thread类的join方法.我想大家可能已经猜出来join方法的功能是什么了.对,join方法的功能就是使异步执行的线程变成同步执行.也就是说,当调用线程实例的start方 ...
    
			
    10. 
						
  10. 使用GenericServlet实例
			
    使用GenericServlet实例 package com.kettas.servlet; import javax.servlet.* ; import java.io.* ; public cl ...
    
			
    11.