Question

我做了一个＆＃34;错误报告＆＃34;我的网站和模态的模态根本无法点击，我到处搜索，最终发现问题是位置：修复

我添加了

transform: translateZ(0);
-webkit-transform: translateZ(0);
z-index:1000;

到.modal css并且它适用于chrome，但后来我在firefox中测试过它仍然没有工作，我尝试了z-index值和其他可能的解决方案但没有工作，唯一的事情是作品是将.modal位置更改为相对位置，但随后模态会与页面上的其他元素混淆。

有人知道如何解决这个问题？请帮助！

CODE：

   .modal {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 1000;
     display: none;
     overflow: hidden;
     -webkit-overflow-scrolling: touch;
     transform: translateZ(0);
     -webkit-transform: translateZ(0);
     outline: 0;
   }

  .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    background-color: #000;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
   }

Answer 1

就代码而言，适用于chrome而不是Firefox。 -webkit-个样式仅适用于webkit浏览器（Chrome和Safar等浏览器）。对于Firefox，您还应该添加-webkit-为-moz-添加的任何样式。所以你应该用-moz附加以下样式，最终看起来像，

 .modal {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 1000;
     display: none;
     overflow: hidden;
     -webkit-overflow-scrolling: touch;
     -moz-overflow-scrolling: touch;
     transform: translateZ(0);
     -webkit-transform: translateZ(0);
     -moz-transform: translateZ(0);
     outline: 0;
   }

  .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    background-color: #000;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
   }

无法点击firefox

1 个答案: