嗨，我正在尝试禁用模式中的外部点击。我尝试过使用诸如背景：“静态”，键盘：假之类的方法，但我似乎无法使其工作
html:
<div class="container my-5">
<hr class="my-5">
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-
keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<center><h1 class="modal-title" id="exampleModalLabel">Want more?</h1></center>
</button>
</div>
<div class="modal-body">
<strong>Create an account or Log in to see additional search results...</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button>
<button type="button" class="btn btn-primary">Log In</button>
</div>
</div>
</div>
</div>
javascript:
$(function() {
$('#basicExampleModal').modal('show');
});
您发布的代码中存在一些语法问题。前任。额外的
</button>data- keyboard="false">$('#basicExampleModal').modal('show');<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container my-5">
<hr class="my-5">
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<center>
<h1 class="modal-title" id="exampleModalLabel">Want more?</h1>
</center>
</div>
<div class="modal-body">
<strong>Create an account or Log in to see additional search results...</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button>
<button type="button" class="btn btn-primary">Log In</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>您可以使用“data-bs-backdrop”和“data-bs-keyboard”属性而不是 data-backdrop="static" data-keyboard="false"。 Bootstrap 5 对命名约定进行了更改，data-backdrop 和 data-keyboard 属性现在以 bs- 为前缀。
使用这个：
$(function() {
$('modal_id').modal('show');
$('modal_id').modal({
keyboard: false,
backdrop: 'static'
})
});
此脚本现在允许通过单击模式外部或按 esc 键来关闭模式。