如何使用 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');
最佳答案
您对显示模式的调用没有问题,很可能您的 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">×</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>
关于jquery - 如何使用 jQuery 打开 Bootstrap 4 模式对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60679782/