Bootstrap 模态 MVC 部分视图数据背景问题答案

【问题标题】：Bootstrap Modal MVC Partial View Data-Backdrop IssueBootstrap 模态 MVC 部分视图数据背景问题
【发布时间】：2015-04-30 03:39:34
【问题描述】：

我遇到了 Bootstrap Modal 的问题，你知道当我们调用一个模态时，我们调用它的页面被禁用（它变成灰色），你只能键入/单击模态，对吗？不过，就我而言，主页和模态都被禁用，因此在调用它后我无法单击或关闭我的模态。我可以通过将data-backdrop 属性设置为false 来修复它，但这会消除我的模态和页面上的效果。

默认模态：

数据背景 = “假”

我认为这是因为我的模态内容是局部视图，并且模态也是从局部视图调用的。帮助您想象：我有 3 页
1. Index.cshtml(主页面)
2. SearchResult.cshtml（部分视图）
3. Edit.cshtl（部分视图）

Index 是我的搜索条件栏，当点击 Go 时，在页面中心调用 SearchResult 局部视图，然后当我点击编辑时，模式弹出。

我的假设是背景也禁用了我的 SearchResult，所以我的整个页面都被禁用了。不过我不太确定。我希望你能帮我解决这个问题。谢谢！

【问题讨论】：

标签： asp.net-mvc twitter-bootstrap modal-dialog

【解决方案1】：

您有代码示例吗？我猜测您使用模态内容填充的 div 与页面内容的其余部分位于 div 内。如果是这种情况，请尝试将模态 div 从任何嵌套标签中移出，使其独立存在。

I.E.

`<div id="PageContent"></div>

<div id="ModalContent"></div>`

【讨论】：

我怎么会错过这么简单的逻辑。哈哈。我在所有页面上使用共享的 _layout.cshtml，将我的模态内容移动到其中修复它。我认为在我的所有页面上包含模式内容代码并不有效，但很高兴知道是什么导致了我的问题。谢谢大佬！

【解决方案2】：

我把这段代码放在我的文档中准备好了，以捕捉该元素何时添加到页面中，并且我将他的 css 属性位置删除为相对：

 $('body').on('DOMNodeInserted', '.modal-backdrop', function () {
           
            $(this).css('position','relative');
        });

【讨论】：