停止模式关闭外部点击或 esc答案

【问题标题】：Stop modal from closing on outside click or esc停止模式关闭外部点击或 esc
【发布时间】：2022-06-11 18:03:02
【问题描述】：

嗨，我试图在我的模式中禁用外部点击。我尝试过使用诸如背景：'静态'，键盘：错误之类的方法，但我似乎无法使其工作

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');
  });

【问题讨论】：

我在你的代码中没有看到任何模式jsfiddle.net/0y395mbr你能解释一下到底出了什么问题吗？
@MFerguson 我正在尝试禁用外部点击（关闭模式）我希望模式阻止用户使用页面，除非使用建议的按钮
The center element is deprecated。不要使用它。 Bootstrap 提供了几种方法来使事物居中，因此您无论如何都不需要它。

标签： javascript html twitter-bootstrap modal-dialog

【解决方案1】：

您发布的代码中有几个语法问题。前任。额外的</button> 标签和data- keyboard="false"> 有一个空格。除了语法问题之外，它应该可以按预期工作，正如您从下面的示例中看到的那样。如果它仍然无法在您的终端上运行，那么您的代码中的其他地方还有其他问题。

$('#basicExampleModal').modal('show');

<html lang="en">

<head>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/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/popper.js@1.14.3/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/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>

【讨论】：

【解决方案2】：

使用这个 -

$(函数() { $('modal_id').modal('show'); $('modal_id').modal({ 键盘：假，背景：“静态” }) });

此脚本现在允许通过在模式外部单击或按住 esc 键来关闭模式。

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。
好的，谢谢。因为，这是我的第一个我不知道的事情......从现在开始我也会尝试照顾这些事情。