为什么当我设置data-backdrop =“false”时，当我点击模态外时它不能关闭模态？答案

【问题标题】：Why when I set data-backdrop = "false", it can't close modal when I click outside of modal?为什么当我设置data-backdrop =“false”时，当我点击模态外时它不能关闭模态？
【发布时间】：2020-04-09 01:50:37
【问题描述】：

我的代码是这样的：

<div class="container">
  <h1 class="display-4 text-center mb-4">Bootstrap Modals</h1>

  <div class="row mb-4">
    <div class="col text-center">
      <h3>The Basic Modal</h3>
      <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal" data-backdrop="false" data-keyboard="true" >Click to open Modal</a>
    </div>
  </div>

</div>

<br/><br/><br/><br/>
<div class="form-group">
    <label for="exampleFormControlTextarea1">Input data</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"> </textarea>
</div>

<!-- basic modal -->
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>Modal Body</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

演示和完整代码如下：https://codepen.io/trendingnews/pen/BayQLrm?editors=1010

我设置 data-backdrop="false" 来移除背景

但这让我无法点击某些东西。我必须点击模态框上的关闭按钮才能关闭模态框。

当我点击模态之外的任何元素时，如何使模态自动关闭？

比如我点击textarea或者其他元素，modal就自动关闭了

【问题讨论】：

因为背景有一个监听器，可以在单击时关闭模式 - 您必须在主体上放置一个监听器，但排除模式 - 尝试将背景颜色更改为透明？不确定这是否可行，您需要在 Bootstrap 中查看引擎盖，或者设置为具有非常非常低的不透明度的白色
@Darren Sweeney 好的，谢谢。我添加.modal-backdrop { background-color: transparent; }，它可以工作

标签： javascript css twitter-bootstrap bootstrap-4 bootstrap-modal

【解决方案1】：

作为我评论的扩展，添加作为其他任何遇到此问题的人的答案。

问题：

您想使用引导模式，没有背景，并具有点击离开模式关闭它的功能。

挑战：

引导模式背景上有一个侦听器，因此当单击它时，它会关闭模式。但是，如果没有背景，那么这不可能发生。

解决方案：

照常使用背景，但将其颜色设置为透明。在背景上设置 css background-color 属性，例如

.modal-backdrop { background-color: transparent; }

【讨论】：