python測試開發django-122.bootstrap模態框(modal)學習

前言

模態框（Modal）是覆蓋在父窗體上的子窗體，使用場景比如：在頁面上編輯內容的時候經常需要彈出一個框框，可以編輯字段提交。
點刪除按鈕的時候，需要彈出二次確認框，這種現頁面上的框框就是模態框

模態框(modal)

調用模態框有2種方法：
第一種方法：
通過 data 屬性：在控制器元素（比如按鈕或者鏈接）上設置屬性 data-toggle="modal"，
同時設置 data-target="#identifier" 或 href="#identifier" 來指定要切換的特定的模態框（帶有 id="identifier"）

第二種方法：
通過 JavaScript：使用這種技術，您可以通過簡單的一行 JavaScript 來調用帶有 id="identifier" 的模態框：$('#identifier').modal(options)

# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/
    <!-- 按鈕觸發模態框 -->
    <button id="myBtn" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">點我彈出模態框</button>
    <!-- 模態框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">
                        模態框（Modal）標題
                    </h4>
                </div>
                <div class="modal-body">
                    刪除后不可恢復，確定刪除？
                    <button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">這是close模糊
				   </button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">確定刪除</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">關閉
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

彈出效果

代碼講解：

<!-- 按鈕觸發模態框 -->
<button id="myBtn" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">點我彈出模態框</button>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

使用模態窗口，您需要有某種觸發器,可以使用按鈕或鏈接。
這里我們使用的是按鈕<button>：

• 在 <button> 標簽中，data-target="#myModal" 是想要在頁面上加載的模態框的目標，把模態框綁定到此按鈕上。
• 在 <button> 標簽中，data-toggle="modal"用於點擊 button 后打開模態窗口，如果沒這個屬性點擊后不會出現模態框

模態框中class屬性：

• .modal，用來把 <div> 的內容識別為模態框，這個屬性是必須的。
• .fade 當模態框被切換時，它會引起內容淡入淡出,這個是fade屬性可以是加載模態框的效果，也可以去掉，模態框就直接彈出來（沒有淡入淡出）。

模態框的標題modal-header

• aria-labelledby="myModalLabel"，該屬性引用模態框的標題。在<div class="modal-header"> 這一層中可以找到 <h4>的屬性 id="myModalLabel"

模態窗默認不可見

• aria-hidden="true" 用於保持模態窗口不可見，直到觸發器被觸發為止（比如點擊在相關的按鈕上）。

關閉模態框（一般是取消按鈕）

• data-dismiss="modal"，是一個自定義的 HTML5 data 屬性。在這里它被用於關閉模態窗口。

模態框分3個部分：頭部，body,底部按鈕

• <div class="modal-header">，modal-header 是為模態窗口的頭部定義樣式的類。
• class="modal-body"，是 Bootstrap CSS 的一個 CSS class，用於為模態窗口的主體設置樣式。
• class="modal-footer"，是 Bootstrap CSS 的一個 CSS class，用於為模態窗口的底部設置樣式。

class="close"，close 是一個 CSS class，用於為模態窗口的按鈕設置樣式。

JavaScript 調用模態框

前面講的是第一種實現方式：在控制器元素（比如按鈕或者鏈接）上設置屬性 data-toggle="modal"。
接着看第二種實現，先去掉 <button> 按鈕的屬性 data-toggle="modal"

    <!-- 按鈕觸發模態框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">點我彈出模態框</button>
    <!-- 模態框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

使用 JavaScript 腳本觸發彈窗:$("#myModal").modal();

# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/

<script type="text/javascript">
     $("#myBtn").click(function () {
         // 顯示modal
         $("#myModal").modal();

     });

</script>

點確定刪除按鈕后，可以只需一些對應的事情，任何收回模態框:$("#myModal").modal('hide')

<script type="text/javascript">
     //點按鈕顯示modal
     $("#myBtn").click(function () {
         // 顯示modal
         $("#myModal").modal();

     });
    // 點確定刪除按鈕，隱藏modal
    $(".modal-footer>.btn-primary").click(function () {
         // 執行一些事情
         // 模態框modal 收回去
         $("#myModal").modal('hide');

     });

</script>

模態框中用到的事件

常用的幾個事件

事件	描述	實例
show.bs.modal	在調用 show 方法后觸發。	$('#identifier').on('show.bs.modal', function () {// 執行一些動作...})
shown.bs.modal	當模態框對用戶可見時觸發（將等待 CSS 過渡效果完成）。	$('#identifier').on('shown.bs.modal', function () {// 執行一些動作...})
hide.bs.modal	當調用 hide 實例方法時觸發。	$('#identifier').on('hide.bs.modal', function () { // 執行一些動作...})
hidden.bs.modal	當模態框完全對用戶隱藏時觸發。	$('#identifier').on('hidden.bs.modal', function () {// 執行一些動作...})

這些事件可在函數中當鈎子使用。

參考菜鳥教程https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html