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

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

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

<head>



    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



    <title></title>



    <link href="css/bootstrap.min.css" rel="stylesheet" />



    <script src="Scripts/jquery-2.1.1.min.js"></script>



    <script src="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="#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="#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="css/bootstrap.min.css" rel="stylesheet" />



    <script src="Scripts/jquery-2.1.1.min.js"></script>



    <script src="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自适应模态窗口的更多相关文章
	

    
								
  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. df -h执行卡住不动问题解决【转】
			
    昨天生产环境报日志写不进去了,因此 登陆线上环境后,习惯用df -h命令查看空间使用情况,结果发现该命令执行半天也没有返回. 因此使用mount命令查看该机器上的目录: [conversant@swi ...
    
			
    2. 
						
  2. com.alibaba.fastjson.JSONException: autoType is not support.
			
    解决办法:https://github.com/alibaba/fastjson/wiki/enable_autotype 文摘如下: 一.添加autotype白名单 添加白名单有三种方式,三选一,如 ...
    
			
    3. 
						
  3. SysV和BSD启动风格的比较
			
    Slackware启动脚本与System V启动脚本的区别何在? Slackware 使用BSD风格的init脚本,而很多别的发行版使用System V风格的init脚本.SysV和BSD脚本都是能让 ...
    
			
    4. 
						
  4. 织梦任意页面调用{dede:field.content/}的方法
			
    过滤掉所有的html代码,只显示文字,具体的ID自己更改. 代码如下: {dede:sql sql='Select content from dede_arctype where id=1'} [fi ...
    
			
    5. 
						
  5. Angular2 CLI安装
			
    官方文档: https://angular.cn/docs/ts/latest/cli-quickstart.html 实现步骤: 1.设置开发环境 2.创建新项目以及应用的骨架 3.启动开启服务 4 ...
    
			
    6. 
						
  6. 整理OpenResty+Mysql+Tomcat+JFinal+Cannal+HUI
			
    阿里云运维主机 118.190.89.22 26611 1.CentOS6.9下安装OpenResty 2.CentOS6.9下安装MariaDB10.2.11 3.使用Intellij IDEA把J ...
    
			
    7. 
						
  7. Java List 转 String
			
    JAVA中List转换String,String转换List,Map转换String,String转换Map之间的转换工具类(调优)https://www.cnblogs.com/cn-wxw/p/6 ...
    
			
    8. 
						
  8. 当mysql 遇到 ctrl+c
			
    目的 为了理解MySQL在执行大SQL时,对执行CTRL+C产生的疑惑,本文通过实验测试和源码分析两个方面,对MySQL处理CTRL+C的详细过程进行分析和讲解,从而解除DBA及开发人员对CTRL+C ...
    
			
    9. 
						
  9. hive1.2.1安装步骤（在hadoop2.6.4集群上）
			
    hive1.2.1在hadoop2.6.4集群上的安装 hive只需在一个节点上安装即可,这里再hadoop1上安装 1.上传hive安装包到/usr/local/目录下 2.解压 tar -zxvf ...
    
			
    10. 
						
  10. MapReduce原理1
			
    Mapreduce是一个分布式运算程序的编程框架,是用户开发“基于hadoop的数据分析应用”的核心框架: Mapreduce核心功能是将用户编写的业务逻辑代码和自带默认组件整合成一个完整的分布式运算 ...
    
			
    11.