在模态

Question

我有一个包含两个Bootstrap（v3.3.6）模式的页面，但一次只打开一个。它们都用简单的文本字段封装表单并选择。其中一个打开就好了，并按预期关闭。另一个打开没关系，但是当我在模态内部单击时关闭（即我点击文本输入字段）。但是，如果我选择文本字段并输入文本字段，它将保持打开状态。我检查过以下内容：

• 由于页面上有多个“模态”类而导致冲突。我删除了第一个模态，第二个仍然显示了这种行为。
• jQuery-UI和Bootstrap JS之间没有冲突。删除了jQuery-UI并仍然显示了这种行为。
• 似乎不是z-index问题。背景是1040，模态是1050.我还通过Chrome开发工具手动删除了背景，但是当我点击它时，模态对话框仍然关闭。 （我怀疑它仍可能是由于某种奇怪的z-index冲突......）
• 似乎与Bootstrap CSS没有冲突。我已删除了list-group和list-group-item类，但仍有问题。
• 我设置了data-backdrop="static"，但行为相同。
• 如果我选中表格字段，则模态输入是可编辑的。

我在精简版jsfiddle中重新创建了这个问题。点击蓝色栏右侧的按钮，你会明白我的意思。对不起，我没有在问题中包含所有代码，因为它只是小提琴......如果它在这里有用，我也可以。

我正在使用React 0.14.7，不确定这是否是问题（有问题的模态对象深深地嵌套在React组件中，就像在小提琴中一样）。

有什么想法吗？

Answer 1

我不知道你是否在你的应用程序中使用jquery等来处理其他事情，而是考虑切换到react-bootstrap。 这样你就可以减少你的js捆绑了很多。 我刚刚开始使用它，到目前为止看起来非常稳固。