Javascript 引导模式弹出窗口不可单击

用于添加模式弹出窗口。单击触发按钮后，模式变暗且不可拾取。知道是什么原因造成的吗，或者去哪里找

---

在同一页中添加以下代码

#myModal{
 z-index: 9999
}

---

有时，更改z索引可能会使引导程序出错，因此，正如他们在中所说的，尝试将

块放在页面顶部。 如果它是一个可以从应用程序中的多个位置访问的模式，您可以将其放置在分部中，并在

app/views/layouts/application.html.erb

上调用它，就像这样（抱歉，这是一个很薄的模板，请告诉我您是否需要erb翻译）：

否则，您可以尝试在

应用程序.html.erb

中执行一个特殊的

，并从其他地方用`调用它。不确定这里的erb语法。

---

这里解释如下：

我在模式中添加data background=“false”时解决了相同的问题，如下所示：

<div class="modal fade" id="userGoing" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false">

---

当我从另一个模式调用一个模式时（但当我只调用第一个模式时），我遇到了同样的问题

因此，这可能对你没有帮助，但它可以为其他人节省很多时间：我对淡入淡出效果有不同的定义，有一行是

display:inline block

。我移除了它，问题就消失了

失败的CSS定义：

.fade {
    ...
    display: inline-block;
    ...
}

---

过了很长一段时间，我只是偶然发现了这个简单的错误

.modal-backdrop {
    z-index: -1;
}

---

谢谢。

您需要发布其余的代码/输出（HTML/CSS/JS），因为模式本身工作正常。这很可能是由于模态被放置在了什么地方。我试着把代码放在不同的地方，结果是一样的。我怀疑这可能是由jquery冲突引起的？嗯，您还包括了放大镜，所以如果发生CSS冲突，我不会感到惊讶。基本上，模态的z-指数看起来是错误的。@vanburen你给我指出了正确的方向。看起来我必须在

之前将模式移动到html的最底部，并将触发器按钮保留在原来的位置。这也有帮助：听起来不错，很高兴我能提供帮助。我目前在application.html.erb中有这个模型，但我不确定如何将变量从视图（调用模型）传递到模型本身。目前正在尝试使用javascript，但有更好的方法吗？这意味着您必须使用第二种技术。只有在调用由ApplicationController创建的实例变量（如

@something

）时，第一个变量才起作用。您需要从应用程序中的任何位置访问的内容。对于第二种技术，在

应用程序.html.erb

中，不要直接放置模态（或通过渲染部分），而是放置一个

。然后，在视图中，在

块中，可以放置模态或渲染局部。这将把你的模态放在其余的之上。把块放在你的页面之上，对我有用。它对我有用谢谢。你知道发生这种事的原因吗？你不知道这对我有多大帮助！谢谢-我添加了

data background=“false”

，一切都很好。

<div class="modal fade" id="userGoing" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false">

.fade {
    ...
    display: inline-block;
    ...
}

.modal-backdrop {
    z-index: -1;
}