时间戳

首页 > 解决方案 > 单击填充时模态引导关闭模态

html - 单击填充时模态引导关闭模态

问题描述

我有以下代码：

.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>

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

标签： htmlcsstwitter-bootstrap-3

解决方案

该类.close触发 data-attribute 中针对的模态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>

推荐阅读