Bootstrap彈窗全解析

Bootstrap是目前比較流行的前端框架之一，它提供了豐富的組件，包括彈窗組件。在本文中，我們將全面解析Bootstrap彈窗，從使用依賴到常見的應用場景，讓大家更好地掌握這個強大的組件。

一、Bootstrap彈窗依賴

在使用Bootstrap彈窗之前，需要先引入Bootstrap依賴。可以通過以下代碼引入Bootstrap的css和js文件：

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

這是Bootstrap 4.5.0的引用，如果需要使用其他版本，請根據實際情況修改鏈接地址。

二、Bootstrap彈窗登錄

登錄框是Bootstrap彈窗中最常見的應用場景之一。以下是一個簡單的登錄框示例：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal">
  登錄
</button>

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="loginModalLabel">登錄</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="username">用戶名</label>
            <input type="email" class="form-control" id="username">
          </div>
          <div class="form-group">
            <label for="password">密碼</label>
            <input type="password" class="form-control" id="password">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">確定</button>
      </div>
    </div>
  </div>
</div>

這裡展示了一個簡單的登錄框，它由一個按鈕和一個模態框組成。當用戶點擊按鈕時，模態框會彈出，可以填寫用戶名和密碼，並且點擊確定後執行登錄操作。

三、Bootstrap彈窗背景不變暗

Bootstrap彈窗默認背景會變暗，但有時我們想讓頁面保持明亮，只讓彈窗背景變暗。可以通過修改代碼實現這個效果：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title">標題</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">×</span>
            </button>
         </div>
         <div class="modal-body">
            <p>內容</p>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
         </div>
      </div>
   </div>
</div>

<style>
   .modal-backdrop.show{
       opacity: 0.3 !important;
    }
</style>

.modal-backdrop是Bootstrap彈窗背景的樣式，通過更改opacity來控制背景透明度。這裡我們將透明度調整到0.3，達到了只讓彈窗背景變暗的效果。

四、Bootstrap彈窗表單

Bootstrap彈窗經常被用作表單，以下是一個簡單的包含表單的示例：

<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="formModalLabel">表單</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">×</span>
            </button>
         </div>
         <div class="modal-body">
            <form>
               <div class="form-group">
                  <label for="exampleInputUsername1">用戶名</label>
                  <input type="text" class="form-control" id="exampleInputUsername1" placeholder="請輸入用戶名">
               </div>
               <div class="form-group">
                  <label for="exampleInputEmail1">郵箱</label>
                  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="請輸入郵箱">
               </div>
               <div class="form-group">
                  <label for="exampleInputPassword1">密碼</label>
                  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="請輸入密碼">
               </div>
               <div class="form-group">
                  <label for="exampleInputCheckPassword1">確認密碼</label>
                  <input type="password" class="form-control" id="exampleInputCheckPassword1" placeholder="請再次輸入密碼">
               </div>
               <div class="form-group form-check">
                  <input type="checkbox" class="form-check-input" id="exampleCheck1">
                  <label class="form-check-label" for="exampleCheck1">同意協議</label>
               </div>
            </form>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary">提交</button>
         </div>
      </div>
   </div>
</div>

這裡展示了一個包含表單的模態框，可以通過表單填寫相關字段內容，並且可以提交表單內容進行處理。

五、Bootstrap彈窗插件

Bootstrap彈窗還有許多插件可供使用，以下是一些常用的插件：

air-datepicker：一個強大的日期選擇器
sweetalert2：一個美觀強大的彈窗插件，支持多種類型的彈窗和動畫效果
bootstrap-fileinput：一個美觀易用的文件上傳組件
bootstrap-select：一個可搜索的下拉框組件

這些插件的使用和安裝可以參考其官方文檔。

六、Bootstrap彈窗二維碼

當需要在彈窗中顯示二維碼時，可以使用jQuery-qrcode插件來生成二維碼，並將其插入到彈窗中。

<div class="modal fade" id="qrcodeModal" tabindex="-1" role="dialog" aria-labelledby="qrcodeModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="qrcodeModalLabel">二維碼</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">×</span>
            </button>
         </div>
         <div class="modal-body">
            <div id="qrcode"></div>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
         </div>
      </div>
   </div>
</div>

<script src="https://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script>
   $('#qrcodeModal').on('shown.bs.modal', function (e) {
      $('#qrcode').qrcode("http://www.baidu.com");
   });
</script>

這裡展示了如何在模態框中使用jQuery-qrcode插件生成二維碼。

七、Bootstrap彈出模態框

通過JavaScript代碼彈出模態框可以使用以下代碼：

$('#myModal').modal('show');

這裡的myModal是模態框的id，可以根據實際情況進行修改。

八、Bootstrap彈出頁面窗口

當需要彈出一個新的頁面窗口時，可以使用以下代碼：

window.open('url', 'name', 'height=500, width=500');

這裡的url是要打開的頁面鏈接，name是彈出的窗口的名稱，可以根據實際情況進行修改，height和width是彈出窗口的高度和寬度。

九、Bootstrap中文網

如果想要了解更多Bootstrap彈窗的使用方法和技巧，可以訪問Bootstrap中文網，裡面有詳細的教程和文檔：

Bootstrap中文網

十、Bootstrap提示框

除了彈窗，Bootstrap還提供了另一種提示組件——提示框。以下是一個簡單的提示框示例：

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="這是一個提示框">
  鼠標移上來試試？
</button>

這裡展示了一個簡單的提示框，可以在鼠標移上按鈕時彈出顯示提示信息。通過修改data-placement屬性，可以控制提示

原創文章，作者：HRXWK，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/372330.html