zoukankan      html  css  js  c++  java
  • 多个按钮触发同一个Bootstrap自适应模态窗口

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

     

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

     

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

    <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- 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>
    

     

    效果如下:
    1

    以上,通过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- 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>     
    

    效果如下:

    2

  • 相关阅读:
    关于这个 blog
    P6499 [COCI2016-2017#2] Burza 题解
    CF1172F Nauuo and Bug 题解
    CF1479D Odd Mineral Resource 题解
    CF1442E Black, White and Grey Tree 题解
    CF1442D Sum 题解
    CF1025D Recovering BST 题解
    CF1056E Check Transcription 题解
    CF1025F Disjoint Triangles 题解
    红包算法的PHP实现
  • 原文地址:https://www.cnblogs.com/darrenji/p/4131028.html
Copyright © 2011-2022 走看看