单击填充时模态引导关闭模态答案

【问题标题】：Modal bootstrap close modal when clicking on the padding单击填充时模态引导关闭模态
【发布时间】：2020-01-29 17:55:48
【问题描述】：

我有以下代码：

.title{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

#my_modal {
  text-align: center;
  padding: 0!important;
}

#my_modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

#my_modal > .modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  width: 100%; 
  padding-left: 30%; 
  padding-right: 30%;
  background-color: red;
}

#my_modal > .modal-dialog > div.row > div > .modal-content{
    border-radius: 35px;
    border: 0;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="col-xs-6" data-toggle="modal" data-target="#my_modal">CLICK ME</div>

<div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="row">
      <div class="col-md-6">
        <div class="modal-content">
          <div class="modal-body">
            <p class="title">TITLE 1</p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="modal-content">
          <div class="modal-body">
            <p class="title">TITLE 2</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

当我点击填充（红色）时，我希望能够关闭模式。但是如果我单击框，不想关闭模式。

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

.close 类触发在数据属性 data-dismiss="" 中定位的模态，只需在模态内容和模态容器之间添加另一层即可满足您的要求：

HTML：

<div class="modal-close-area close" data-dismiss="modal" aria-label="Close">&nbsp;</div>

CSS：

.modal-close-area {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

#my_modal {
  text-align: center;
  padding: 0!important;
}

#my_modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

#my_modal>.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  width: 100%;
  padding-left: 30%;
  padding-right: 30%;
  background-color: red;
}

#my_modal>.modal-dialog>div.row>div>.modal-content {
  border-radius: 35px;
  border: 0;
}

.modal-close-area {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="col-xs-6" data-toggle="modal" data-target="#my_modal">CLICK ME</div>

<div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-close-area close" data-dismiss="modal" aria-label="Close">&nbsp;</div>
    <div class="row">
      <div class="col-md-6">
        <div class="modal-content">
          <div class="modal-body">
            <p class="title">TITLE 1</p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="modal-content">
          <div class="modal-body">
            <p class="title">TITLE 2</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：