Bootstrap 在模态框内单击时模态框消失
Bootstrap modal disappears on click inside the modal
我有一个包含两个 Bootstrap (v3.3.6) 模式的页面，但一次只打开一个。它们都使用简单的文本字段和选择来封装表单。其中之一打开得很好，并按预期关闭。另一个可以正常打开，但只要我在模态内部单击（即单击文本输入字段）就会关闭。不过，如果我切换到文本字段并在其中输入内容，它会保持打开状态。我检查了以下内容：
- 页面上有多个 "modal" 类，因此不存在冲突。我删除了第一个模态，第二个仍然显示此行为。
- jQuery-UI 和 Bootstrap JS 之间没有冲突。删除了 jQuery-UI 并且仍然显示此行为。
- 似乎不是 z-index 问题。背景为 1040，模态为 1050。我还通过 Chrome 开发工具手动删除了背景，但是当我在其中单击时模态对话框仍然关闭。 （我怀疑它仍然可能是由于某种奇怪的 z-index 冲突...）
- 似乎与 Bootstrap CSS 没有冲突。我已经删除了
list-group 和 list-group-item 类，但问题仍然存在。
- 我设置了
data-backdrop="static"，但得到了相同的行为。
- 如果我在表单域中使用 Tab 键，模式输入是可编辑的。
我在精简版 jsfiddle 中重现了这个问题。单击蓝色条右侧的按钮，您就会明白我的意思。抱歉，我没有包含问题中的所有代码，因为它都在 fiddle 中...如果对这里有帮助，我也可以。
我正在使用 React 0.14.7，不确定这是否是问题所在（有问题的模态对象深深嵌套在 React 组件中，如 fiddle 中所示）。
有什么想法吗？
我不知道您是否在应用程序中将 jquery 等用于其他用途，但考虑切换到 react-bootstrap。
这样你就可以大大减少你的 js 包。
我刚开始使用它，到目前为止看起来还不错。
我有一个包含两个 Bootstrap (v3.3.6) 模式的页面，但一次只打开一个。它们都使用简单的文本字段和选择来封装表单。其中之一打开得很好，并按预期关闭。另一个可以正常打开，但只要我在模态内部单击（即单击文本输入字段）就会关闭。不过，如果我切换到文本字段并在其中输入内容，它会保持打开状态。我检查了以下内容：
- 页面上有多个 "modal" 类，因此不存在冲突。我删除了第一个模态，第二个仍然显示此行为。
- jQuery-UI 和 Bootstrap JS 之间没有冲突。删除了 jQuery-UI 并且仍然显示此行为。
- 似乎不是 z-index 问题。背景为 1040，模态为 1050。我还通过 Chrome 开发工具手动删除了背景，但是当我在其中单击时模态对话框仍然关闭。 （我怀疑它仍然可能是由于某种奇怪的 z-index 冲突...）
- 似乎与 Bootstrap CSS 没有冲突。我已经删除了
list-group和list-group-item类，但问题仍然存在。 - 我设置了
data-backdrop="static"，但得到了相同的行为。 - 如果我在表单域中使用 Tab 键，模式输入是可编辑的。
我在精简版 jsfiddle 中重现了这个问题。单击蓝色条右侧的按钮，您就会明白我的意思。抱歉，我没有包含问题中的所有代码，因为它都在 fiddle 中...如果对这里有帮助，我也可以。
我正在使用 React 0.14.7，不确定这是否是问题所在（有问题的模态对象深深嵌套在 React 组件中，如 fiddle 中所示）。
有什么想法吗？
我不知道您是否在应用程序中将 jquery 等用于其他用途，但考虑切换到 react-bootstrap。 这样你就可以大大减少你的 js 包。 我刚开始使用它，到目前为止看起来还不错。