带有 translate3d 的模态关闭按钮答案

【问题标题】：modal close button with translate3d带有 translate3d 的模态关闭按钮
【发布时间】：2017-06-15 22:10:33
【问题描述】：

我在使用快速查看模式的 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>

【问题讨论】：

标签： ios css twitter-bootstrap

【解决方案1】：

在玩弄了 CSS 选择器之后，弄明白了。希望这对将来的任何人都有帮助

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

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

【讨论】：