Bootstrap 對話框

2018-03-03 16:35 更新

Modals（模態(tài)框）就像對話框。

它用于

  • 顯示對話框提示
  • 顯示警告
  • 顯示確認(rèn)對話框
  • 顯示較大版本的圖像
  • 顯示一長串條款和條件
  • 顯示注冊/登錄表單

使用Bootstrap 3，模態(tài)框已經(jīng)可以響應(yīng)，這意味著它們看起來不錯，即使在較小的屏幕上也能正常運(yùn)行。

每個模態(tài)框都應(yīng)該有一個帶有類 modal的容器。

為了給模態(tài)框添加淡入淡出效果，我們需要將類 fade 添加到同一個容器中。

接下來，我們定義一個具有類 modal-dialog的div元素。這是負(fù)責(zé)控制模態(tài)框的大小。

在模態(tài)對話框中，我們將創(chuàng)建一個封裝模態(tài)框各個子部分的wrapper元素。

這個wrapper元素應(yīng)該有一個類叫 modal-content。

模態(tài)框的子部分是header，body和footer。

header和footer部分是可選的。要創(chuàng)建模態(tài)框的header，你需要一個 div 元素與類 modal-header。

在里面你可以放一個模態(tài)框標(biāo)題和模態(tài)框關(guān)閉圖標(biāo)。

模態(tài)框標(biāo)題使用modal-title類的h4元素給出。

這里的dismiss圖標(biāo)是一個乘法（x）符號，它圍繞一個按鈕元素。此按鈕應(yīng)該使用類 close，使它與模態(tài)框標(biāo)題的左上角對齊。

添加一個 data-dismiss屬性可以使按鈕在單擊時關(guān)閉模態(tài)框。

對于body，我們需要一個modal-body類的div。

為了創(chuàng)建模態(tài)框footer，我們定義一個具有類 modal-footer的div元素。

默認(rèn)情況下，模態(tài)框footer中的內(nèi)容是右對齊的。

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</head>
  <body style="margin:30px">
     <!-- Modal Handle -->
     <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
     Launch modal
     </button>

      <!-- Modal Markup kept out of all the div elements -->
      <div class="modal fade" id="myModal">
          <div class="modal-dialog">
              <div class="modal-content">
                  <!-- Modal Header -->
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">Welcome Back!</h4>
                  </div>
                  <!-- Modal Body -->
                  <div class="modal-body">
                      <h1>Hello Readers!</h1>
                  </div>
                  <!-- Modal Footer -->
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
              </div>
          </div>
      </div>
  </body>
</html>

對話框大小

模態(tài)框有三種寬度：大，默認(rèn)和小。

如果沒有向 modal-dialog 提供額外的類，它將以默認(rèn)寬度600p顯示。

要使模態(tài)框變大或變小，你需要將這些類中的一個添加到模態(tài)對話框元素：

  • modal-lg：寬度為900px的大模態(tài)框
  • modal-sm：寬度為300px的小模態(tài)框
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- Large modal -->
  <button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Large modal</button>
 
    <div id="largeModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Large Modal</h4>
                </div>
                <div class="modal-body">
                    <p>Add the <code>.modal-lg</code> class on <code>.modal-dialog</code> to create this large modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary">OK</button>
                </div>
            </div>
        </div>
    </div>
     
    <!-- Small modal -->
    <button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">Small modal</button>
     
    <div id="smallModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Small Modal</h4>
                </div>
                <div class="modal-body">
                    <p>Add the <code>.modal-sm</code> class on <code>.modal-dialog</code> to create this small modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary">OK</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

使用Javascript顯示對話框

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#myModal").modal("show");
  });
</script>
</head>
<body>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
                <h4 class="modal-title">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes you made to document before closing?</p>
                <p class="text-warning"><small>If you don"t save, your changes will be lost.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

更改觸發(fā)器按鈕上的模態(tài)框內(nèi)容

以下示例顯示如何更改根據(jù)觸發(fā)按鈕的data-title屬性值更改模態(tài)框窗口的標(biāo)題。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#myModal").on("show.bs.modal", function(event){
        var button = $(event.relatedTarget);  // Button that triggered the modal
        var titleData = button.data("title"); // Extract value from data-* attributes
        $(this).find(".modal-title").text(titleData + " Form");
    });
});
</script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <button type="button" class="btn btn-primary" 
    data-toggle="modal" data-target="#myModal" data-title="Feedback">Feedback</button>
    <button type="button" class="btn btn-primary" 
    data-toggle="modal" data-target="#myModal" data-title="Report Error">Report Error</button>
    <button type="button" class="btn btn-primary" 
    data-toggle="modal" data-target="#myModal" data-title="Contact Us">Contact Us</button>
    
    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" 
                    data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Modal Window</h4>
                </div>
                <div class="modal-body">
                    <form role="form">
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Email:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">Message:</label>
                            &lt;textarea class="form-control" id="message-text"&gt;&lt;/textarea&gt;
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary">Send</button>
                </div>
            </div>
        </div>
    </div>
</div>     
</body>
</html>

選項(xiàng)

有一些選項(xiàng)可以傳遞到modal()方法來自定義模態(tài)框窗口。

名稱 類型 默認(rèn)值 描述
backdrop 布爾值或字符串"static" true 包含一個modal-backdrop 元素?；蛘?，你可以為背景指定static ，在點(diǎn)擊時不關(guān)閉模態(tài)框。
keyboard boolean（布爾值） true 按退出鍵關(guān)閉模態(tài)框窗口。
show boolean（布爾值） true 顯示初始化或激活時的模態(tài)框。

.modal(options)

此方法將你的內(nèi)容作為模態(tài)框激活。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".launch-modal").click(function(){
    $("#myModal").modal({
      keyboard: true
    });
  });
});
</script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <input type="button" class="btn btn-lg btn-primary launch-modal" value="Launch Demo Modal">
    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" 
                    aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p>This is a test?</p>
                    <p class="text-warning"><small>Test.</small></p>
                    <p class="text-info"><small><strong>Note:</strong> 
                    Press Tab key on the keyboard to enter inside the 
                    modal window after that press the Esc key.</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

.modal('toggle')

此方法手動切換模態(tài)框窗口。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".toggle-modal").click(function(){
    $("#myModal").modal("toggle");
  });
});
</script>
<style type="text/css">
.bs-example{
  margin: 20px;
}
.toggle-modal {
  width: 200px;
  position: absolute;
  margin: 0 auto;
  z-index: 9999;
  bottom: 20px;
  right: 0;
  left: 0;
}
</style>
</head>
<body>
<div class="bs-example">
  <!-- Button HTML (to Trigger Modal) -->
    <input type="button" class="btn btn-lg btn-primary toggle-modal" value="Toggle Demo Modal">

    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Confirmation</h4>
          </div>
          <div class="modal-body">
            <p>This is a test?</p>
            <p class="text-warning"><small>This is atest.</small></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
</div>
</body>
</html>

.modal('show')

此方法可用于手動打開模態(tài)框窗口。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".open-modal").click(function(){
    $("#myModal").modal("show");
  });
});
</script>
<style type="text/css">
.bs-example{
  margin: 20px;
}
.open-modal{
  width: 200px;
  position: absolute;
  margin: 0 auto;
  top: 20px;
  right: 0;
  left: 0;
}
</style>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <input type="button" class="btn btn-lg btn-primary open-modal" value="Show Demo Modal">

    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" 
                    aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p>This is a test?</p>
                    <p class="text-warning"><small>This is a test.</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

.modal('hide')

此方法可用于手動隱藏模態(tài)框窗口。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#myModal").modal("show");
  $(".hide-modal").click(function(){
    $("#myModal").modal("hide");
  });
});
</script>
<style type="text/css">
.bs-example{
  margin: 20px;
}
.hide-modal {
    width: 200px;
  position: absolute;
  margin: 0 auto;
  right: 0;
  left: 0;
    bottom: 20px;
  z-index: 9999;
}
</style>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <input type="button" class="btn btn-lg btn-primary hide-modal" value="Hide Demo Modal">

    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" 
                    aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p>This is a test?</p>
                    <p class="text-warning"><small>This is a test.</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

事件

Bootstrap的modal類包括很少的用于掛鉤到模態(tài)框功能的事件。

事件 描述
show.bs.modal 在調(diào)用show instance方法時觸發(fā)。
shown.bs.modal 當(dāng)模態(tài)框?qū)τ脩艨梢姇r觸發(fā)。它將等待，直到CSS轉(zhuǎn)換過程完全完成。
hide.bs.modal 當(dāng)hide instance方法被調(diào)用時觸發(fā)。
hidden.bs.modal 當(dāng)模態(tài)框已完成對用戶的隱藏時，會觸發(fā)此事件。    它將等待，直到CSS轉(zhuǎn)換過程完全完成。

以下示例在模態(tài)框窗口的淡出轉(zhuǎn)換已經(jīng)完全完成時顯示日志消息。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".open-modal").click(function(){
    $("#myModal").modal("show");
  });
    $("#myModal").on("hidden.bs.modal", function(){
    console.log("Modal window has been completely closed.");
  });
});
</script>
<style type="text/css">
.bs-example{
  margin: 20px;
}
.open-modal{
  position: absolute;
  margin: 0 auto;
  top: 20px;
  right: 0;
  left: 0;
}
</style>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <input type="button" class="btn btn-lg btn-primary open-modal" value="Show Demo Modal">

    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" 
                    data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p>This is a test?</p>
                    <p class="text-warning"><small>This is a test.</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號