如何使用 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 回车。您应该会在控制台中看到显示功能，如下所示。如果不是，您应该在您的页面中包含 jQuery，无论是在部分模板还是在主模板中。

现在让我们检查 bootstrap js 是否已加载。

在控制台类型 bootstrap 中，您应该会看到打印在控制台中的对象，如下图所示。如果你没有看到这个，你需要在部分或主模板中包含 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>

如何使用 jQuery 打开 Bootstrap 4 模态对话框

How to open a Bootstrap 4 modal dialog using jQuery

html

jquery

bootstrap-dialog

bootstrap-4