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

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

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

<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. css初始化minireset.css
			
    一个很小的现代CSS重置,涵盖了基本内容: 重置字体大小:这样使用语义标记不会影响样式 重置块边距:所以只有在需要时才应用间距 重置表格:这样表格数据只占用它所需的空间 保留了行内间距:因此,按钮和输 ...
    
			
    2. 
						
  2. ldconfig命令与ldd命令
			
    ldconfig是一个动态链接库管理命令,为了让动态链接库为系统所共享,还需运行动态链接库的管理命令 ldconfig通常在系统启动时运行,而当用户安装了一个新的动态链接库时,就需要手工运行这个命令. ...
    
			
    3. 
						
  3. jQuery下的onChange事件在某些情况下无效
			
    onChage无效的原因: 虽然表面上感觉是当内容发生变化时,就会触发onchange事件,但是那只能在页面上操作.而如果通过dom对象去修改它的value则什么事也不会发生. onchange触发原 ...
    
			
    4. 
						
  4. P4186 【[USACO18JAN]Cow at Large G】
			
    思路是覆盖子树,我们发现,农民想截住牛的最优策略是不断向上来尽可能地覆盖更大的子树 我们想要尽早地覆盖一个子树,一个显然的贪心是在这个子树中选取深度最小的一个放农民 如果我们在一个点放置了农民,那么其 ...
    
			
    5. 
						
  5. .NetCore下使用Prometheus实现系统监控和警报 （三）集成Grafana
			
    有了前面InfluxDB的经验,这里就很好处理了,数据类型选择Prometheus选地址等,填好保存 同样通过导入数据处理,我们在https://grafana.com/dashboards上选择Da ...
    
			
    6. 
						
  6. 每日踩坑 2018-01-09 WebAPI会如何面对URL中的空串string参数？
			
    这个问题是我的同事问我的,可能有点 low 哈. 同事审查我的代码,表示应该对 URL 中的 string 参数进行一个空验证. 我倾向于认为,会无法匹配到路由方法. 然后我就写了一个Test, [H ...
    
			
    7. 
						
  7. Centos 首次运行MySQL
			
    1:启动MySQL systemctl start mysqld.service 2:查看MySQL运行状态 systemctl status mysqld.service 3:查看默认密码 grep ...
    
			
    8. 
						
  8. ios网络编程（入门级别）-- 基础知识
			
    在学习ios的过程中,停留在UI控件很长时间,现在正在逐步的接触当中!!!!!!在这个过程中,小编学到了一些关于网络编程知识,并且有感而发,在此分享一下: 关于网络请求的重要性我想不用多说了吧!!!对 ...
    
			
    9. 
						
  9. zoj 3460 二分+二分图匹配
			
    不错的思想 /* 大致题意: 用n个导弹发射塔攻击m个目标.每个发射架在某个时刻只能为 一颗导弹服务,发射一颗导弹需要准备t1的时间,一颗导弹从发 射到击中目标的时间与目标到发射架的距离有关.每颗导弹 ...
    
			
    10. 
						
  10. C语言程序设计I—寒假作业
			
    20188480   http://www.cnblogs.com/arthur-w/
    
			
    11.