简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery とブートストラップを使用してマルチレイヤーの適応モーダル ウィンドウを実装する

jQuery とブートストラップを使用してマルチレイヤーの適応モーダル ウィンドウを実装する

高洛峰
高洛峰オリジナル
2016-12-27 15:38:081360ブラウズ

この記事では、多層モーダル ウィンドウを実践します。これは適応型です。

ページ上のボタンをクリックして、アダプティブ モーダル ウィンドウの最初のレイヤーをポップアップします。

jQuery とブートストラップを使用してマルチレイヤーの適応モーダル ウィンドウを実装する

第 1 層のモーダル ウィンドウにはボタンが含まれており、このボタンをクリックすると、第 2 層のモーダル ウィンドウがポップアップされ、第 1 層のモーダル ウィンドウがブロックされます。第 2 層のモーダル ウィンドウ。モーダル ウィンドウが開いているときは、第 1 層のモーダル ウィンドウを閉じることはできません。

jQuery とブートストラップを使用してマルチレイヤーの適応モーダル ウィンドウを実装する

特定のページ実装部分は次のとおりです: 

<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() {
            $(&#39;#m1&#39;).on("click", function() {
                $(&#39;#firstmodal&#39;).modal();
            });
            $(&#39;#m2&#39;).on("click", function () {
                $(&#39;#secondmodal&#39;).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 の内容全体です。これは非常に優れており実用的であり、直接使用できます。プロジェクト。

jQuery と Bootstrap を使用してマルチレイヤーのアダプティブ モーダル ウィンドウを実装することに関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jQuery はページのコンテンツに応じて iframe の高さを調整するメソッドを実装するだけです次の記事：jQuery はページのコンテンツに応じて iframe の高さを調整するメソッドを実装するだけです

関連記事

続きを見る