javascript - "data-dismiss"Bootstrap modal Bugando 位置 = "absolute"

Question

我通过自定义 modal 添加了一个关闭按钮自举。

我想要它在 modal 的右边为此我给出了一个'position:absoluteor位置:固定and modified the顶部 and对`它。

问题在于这样做按钮变得不可用。据我所知，data-dismiss: modal 之间存在冲突。 (使元素关闭模态的属性)带有“position: absolute”。

我尝试了其他方法来制作这样的“按钮”导入.svg，创建一个<button> , <span>除了更改 position: absolute通过 float: right . 通过这样做，只有一小部分按钮区域成为要关闭的链接，而不是整个区域。移动和桌面的体验非常糟糕，因为需要多次按下/单击才能找到正确的区域，而右侧是 ALL 按钮区域，可以作为关闭 modal 的链接。 .

下面的代码片段变得更加清晰:

.close-modal {
  position: absolute;
  /* REMOVE `POSITION` AND THE BUTTON WORKS */
  width: 75px;
  height: 75px;
  background-color: transparent;
  right: 35px;
  top: 25px;
  cursor: pointer
}
.close-modal:hover {
  opacity: .3;
}
.lr {
  height: 75px;
  width: 1px;
  margin-left: 35px;
  background-color: #222;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  z-index: 1051;
}
.rl {
  height: 75px;
  width: 1px;
  background-color: #222;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  z-index: 1051;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />



<a href="#modal" class="portfolio-link" data-toggle="modal">
             CALL MODAL    
</a>



<div class="portfolio-modal modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-content">
    <div class="close-modal" data-dismiss="modal">
      <div class="lr">
        <div class="rl">
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
          <div class="modal-body">

            <p>CONTENT MODAL CONTENT MODAL</p>

            <p>CONTENT MODAL CONTENT MODAL</p>

            <p>CONTENT MODAL CONTENT MODAL</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我该如何解决这个问题？

Answer 1

还有一些其他元素堆叠在您的关闭按钮之上。 将 z-index 设置为高值将使您的关闭按钮起作用。 这将使关闭模式按钮位于顶部，因此可以单击。 您可以通过以下方式执行此操作:

.close-modal{
  z-index: 1100;
  position: absolute;
  ...
 }