MVC中的Bootstrap模态，双背景 - 背景出现两次

Question

我注意到使用jQuery生成bootstrap模式时出现问题。在动态生成的局部视图（我的模态）中添加更多javascript会导致出现双重背景。谁知道为什么会这样？我正在使用jquery-1.8.2.js和Bootstrap v3.1.1。非常感谢。

App.js

$(document).ready(function () {

$('.modal-button').on('click', function (e) {
    // Remove existing modals.
    $('.modal').remove();
    $.ajax({
        url: '/Ajax/GetSearchModal/',
        type: "get",
        cache: false,
        success: function (data) {
            var modal = $(data);
            $(data).modal({
                backdrop: 'static',
                keyboard: false,
            });
        }
    });
});

});

局部视图（我的模态）

@model MVCApp.Web.Models.ModalSearchModel
<div id="Ajax-Modal" class="modal fade" aria-hidden="true" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>
                    Select Something
                </h3>
            </div>
            @using (Html.BeginForm(Model.Action, Model.Controller, FormMethod.Post))
            { 
            <div class="modal-body">
                @Html.HiddenFor(m => m.SelectedDropDownID, new { @class     = "select-something-ddl", style = "width:100%", placeholder = "Search..." })
            </div>
            <div class="modal-footer">
                <button type="submit" value="Continue">Continue</button>
                <button type="button" value="Cancel" data-dismiss="modal">Cancel</button>
            </div>
            }
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {

        // This here causes the drop backdrop

        // select2 code here
    });
</script>

UPDATE

将javascript从模态移动到成功处理程序不适用于我想要实现的目标。我希望启动select2下拉列表。我能在成功处理程序中使用它的唯一方法是使用以下方法：

            modal.on('shown.bs.modal', function () {
                $('#SelectedDropDownID').select2({
                    ajax: {
                        url: '/Ajax/FetchResults/',
                        dataType: 'json',
                        delay: 250,
                        data: function (searchTerm) {
                            return { query: searchTerm };
                        },
                        results: function (data) {
                            return { results: data };
                        }
                    },
                    minimumInputLength: 2,
                    formatResult: formatRepo,
                    formatSelection: formatRepoSelection
                });

            });

但是，select2激活有一个延迟，因为在模态完成动画进入屏幕之前，所显示的事件不会触发。如果我在显示的事件之外运行代码，则select2永远不会激活。

解决了

非常感谢Pasha Zavoiskikh和cvrebert。我不得不更新Bootstrap和jQuery来修复双重背景。继Pasha的评论之后，在调用select2之前将模态附加到正文，固定select2不会触发。这是完整的修复：

function formatRepo(item) {
    var markup = "<table class='item-result'><tr>";
    if (item.text !== undefined) {
        markup += "<div class='item-name' data-jtext=" + item.text + " data-jid=" + item.id + ">" + item.text + "</div>";
    }
    markup += "</td></tr></table>"
    return markup;
}

function formatRepoSelection(item) {
    return item.text;
}


$('.modal-button).on('click', function (e) {
    // Delete existing modals.
    $('.modal').replaceWith('');
    // Get modal.
    $.ajax({
        url: '/Ajax/GetSearchModal/',
        type: "get",
        cache: false,
        success: function (data) {
            var modal = $(data);
            $('body').append(modal);
            $('#SelectedDropDownID').select2({
                ajax: {
                    url: '/Ajax/FetchResults/',
                    dataType: 'json',
                    delay: 250,
                    data: function (searchTerm) {
                        return { query: searchTerm };
                    },
                    results: function (data) {
                        return { results: data };
                    }
                },
                minimumInputLength: 2,
                formatResult: formatRepo,
                formatSelection: formatRepoSelection
            });

            modal.modal({
                backdrop: 'static',
                keyboard: false,
            });
        }
    });
});

Answer 1

我的两分钱

对我来说没有工作删除淡入淡出class我结束了做一点点黑客

 $(document).on("DOMNodeRemoved",".modal-backdrop",function(){
    $(".modal-backdrop").remove();
 });

诀窍不知道是否有任何后果这样做，但它的工作形式我与阶级褪色。

Answer 2

通过放置包含将由主页上的javascript重写的id的<div>而不是部分视图来解决问题。

在您的情况下，包含模态的部分视图将如下所示：

    @model MVCApp.Web.Models.ModalSearchModel
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>
                    Select Something
                </h3>
            </div>
            @using (Html.BeginForm(Model.Action, Model.Controller, FormMethod.Post))
            { 
            <div class="modal-body">
                @Html.HiddenFor(m => m.SelectedDropDownID, new { @class     = "select-something-ddl", style = "width:100%", placeholder = "Search..." })
            </div>
            <div class="modal-footer">
                <button type="submit" value="Continue">Continue</button>
                <button type="button" value="Cancel" data-dismiss="modal">Cancel</button>
            </div>
            }
        </div>
    </div>

以下div应放在主页面中：

<div id="Ajax-Modal" class="modal fade" aria-hidden="true" role="dialog">

Answer 3

在模态弹出窗口中执行某些操作后，我遇到了同样的问题，背景永远不会关闭。

任务逻辑： 1.将显示一个弹出窗口，让用户从图像列表中选择一个图像 2.用户选择图像后，弹出模式应该关闭

添加了名为data-dismiss="modal"的标签的属性修复了使用按钮选择图像的问题。