如何使用 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。

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