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

Question

我在使用 jQuery 生成引导模式时注意到一个问题。在动态生成的部分视图（我的模式）中添加更多 JavaScript 会导致出现双背景。有谁知道为什么会发生这种情况？我正在使用 jquery-1.8.2.js 和 Bootstrap v3.1.1。非常感谢。

应用程序.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>

更新

将 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();
 });

我不知道这样做是否会产生任何后果，但它对我来说是有效的，并且班级褪色。