Bootstrap 模态在模态内单击时消失

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 包。 我刚开始使用它，到目前为止看起来还不错。