Question

我遇到了使用Quickview模式在Ipad上滚动的问题。问题是我试图滚动模态，但页面本身是滚动，而不是模态。我用.modal * {-webkit-transform:translate3d(0,0,0)修复了滚动问题。但是现在模态x按钮不会关闭模态。如果我在模态外触摸它关闭，但是我想保持关闭按钮的功能，因为并非所有用户都知道在模态外触摸。

<div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <svg class="icon close--modal">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://10.30.2.54:300/images/sprite.svg#close--modal"></use>
            </svg>
          </button>
          <h4 class="modal-title">Quick View</h4>
        </div>

Answer 1

在使用CSS选择器之后，想出来了。希望这有助于未来的任何人

.modal * :not(.modal-header *) {-webkit-transform: translate3d(0,0,0);}

这会将规则应用于.modal的所有子项，但模态标题及其子项

除外

与translate3d的模态关闭按钮

1 个答案: