无法在 Firefox 上单击引导模式答案

【问题标题】：Not able to click on bootstrap modal on firefox无法在 Firefox 上单击引导模式
【发布时间】：2016-06-23 09:43:48
【问题描述】：

我为我的网站做了一个“错误报告”模态，在模态中根本无法点击，我到处搜索，最终发现问题出在位置：已修复

我加了

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

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-modal

【解决方案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);
   }

【讨论】：