html - 无法点击 Firefox 上的 Bootstrap 模式

Question

我为我的网站制作了一个“错误报告”模态，模态中根本无法点击，我到处搜索，最终发现问题出在 position:fixed

我加了

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

.modal css 它适用于 chrome，但后来我在 firefox 中进行了测试，但它仍然无法正常工作，我尝试了 z-index 值和其他可能的解决方案，但都没有奏效，唯一有效的是将 .modal 位置更改为相对位置，但模态会与页面上的其他元素混淆。

有人知道怎么解决吗？请帮忙!

代码:

   .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);
   }