如何使用 jQuery 打開 Bootstrap 4 模式對話框

Question

如何使用 jQuery 打開 Bootstrap 4 模態對話框？

我可以使用如下按鈕打開一個模態框，它會打開一個帶有以下 div 的對話框：

<input type="button" 
       name="PurchaseOrderButton" 
       value="Find" 
       class="btn btn-primary" 
       data-toggle="modal"
       data-target="#id-FindModal" 
       id="id-FindBtn" 
       />

<div class="modal" id="id-FindModal">

我需要運行一個 JavaScript 函數來執行一些步驟，然后加載模態。 我用以下語句嘗試過，但它不起作用：

$('#id-FindModal').modal('show');

Answer 1

您調用顯示模態很好，很可能沒有加載您的 Bootstrap 庫或 jQuery 庫。 確保它們是..

這是一個用於確認您的方法的工作示例：

 runCommands() function runCommands() { // run commands $('#id-findModal').modal() }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script> <div id="id-findModal" class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>

Answer 2

看起來沒有加載 JS 文件。

讓我們做一些調試。

打開 Chrome 開發工具。 轉到控制台類型jQuery Enter 鍵。 您應該在控制台中看到 show 函數，如下所示。 如果沒有，您應該在頁面中包含 jQuery，無論是在部分模板中還是在主模板中。

現在讓我們檢查 bootstrap js 是否已加載。

在控制台類型的引導程序中，您應該會看到一個打印在控制台中的對象，如下圖所示。 如果您沒有看到這一點，您需要在部分或主模板中包含 bootstrap js 文件。

我想 popper.js 也需要顯示模態。 如果需要，也添加。

如果以上所有步驟都正確，但您的模式仍然無法正常工作，請嘗試此操作。

您可能在 DOM 准備好之前調用模態函數。 在 DOM 准備好后執行你的 JS 腳本

$(function() {
  // you js code

  $('#id-FindModal').modal('show');

});

讓我們也做一些額外的檢查。

$(function() {
  // your js code
  if($('#id-FindModal').length) {
     $('#id-FindModal').modal('show');
  } else {
    alert("Element with id - id-FindModal could not be found.");
  } 
});

快樂編碼....

Answer 3

 $(document).ready(function () { $(document).on('click', '.open_popup', function () { //Your function goes here..// $('#myModal').modal('show'); }); });

 <a href="#" class="open_popup btn btn-xs" >Click For Popup</a> <div id="myModal" class="modal fade" role="dialog" style="width:100%"> <div class="modal-dialog" style="width: 60%;"> <div class="modal-content" > <div class="modal-header"> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>