使用jQuery和Bootstrap實現多層、自適應模態視窗

使用jQuery和Bootstrap實現多層、自適應模態視窗_jquery

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本篇實踐一個多層模態視窗，而且是自適應的。

點擊頁面上的一個按鈕，彈出第一層自適應模態視窗。

在第一層模態視窗內包含一個按鈕，點擊該按鈕彈出第二層模態視窗，彈出的第二層模態視窗會擋住第一層模態視窗，即第二層模態視窗開啟的時候，無法關閉第一層模態視窗。

具體頁面實現部分如下：

複製代碼代碼如下:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <style type="text/css">
        .modal-open,
        .modal-open .navbar-fixed-top,
        .modal-open .navbar-fixed-bottom {
            margin-right: 0;
        }
        .modal {
            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;
            overflow-y: auto;
        }
        .modal.container {
            max-width: none;
        }
        #firstmodal {
            width: 98%;
            height: 98%;
        }
        #secondmodal {
            width: 99%;
            height: 99%;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            $('#m1').on("click", function() {
                $('#firstmodal').modal();
            });
            $('#m2').on("click", function () {
                $('#secondmodal').modal();
            });
        });
    </script>
</head>
<body>
        <div class="content" style="margin-left: 100px;margin-top: 100px;">
            <button class="btn btn-primary btn-lg" id="m1">開啟第一層模態視窗</button>
        </div>
        <div id="firstmodal" 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>
                    <button class="btn btn-primary btn-lg" id="m2">開啟第二層模態視窗</button>
                    第一層主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    第一層主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    第一層主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                    主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容
                </p>
            </div>
            <div class="modal-footer" style="text-align: center;">
                <button type="button" data-dismiss="modal" class="btn btn-default">關閉</button>
            </div>
        </div>
        <div id="secondmodal" 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>

以上就是jQuery和Bootstrap實現多層、自適應模態視窗的全部內容了，非常的不錯，而且很實用，直接就可以使用到項目中去。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More