Question

我通过自定义modal bootstrapping来添加关闭按钮。

我想在or的右侧，因为我给了一个'位置：绝对and modified the位置：固定and顶部data-dismiss: modal对吧。

问题在于这样按钮变得无法使用。从我收集的内容来看，<button>（使元素关闭模态的属性）与'position：absolute`之间存在冲突。

除了通过<span>更改position: absolute之外，我还尝试了其他方法来制作这样的“按钮”导入.svg，创建float: right，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>

{{1}}

我如何解决这个问题？

Answer 1

关闭按钮顶部还有一些其他元素。将z-index设置为较高值会使您的dismiss按钮起作用。这会使close-modal按钮位于顶部，因此可以点击。您可以通过以下方式执行此操作：

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

“data-dismiss”Bootstrap modal Bugando with position =“absolute”

1 个答案: