Question

我注意到在使用jQuery生成引导模式时出现问题。在动态生成的局部视图（我的模态）中添加更多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>

更新

将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

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

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

    @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"的标签的属性，解决了使用按钮选择图像的问题。

Answer 4

这是我遇到的一个旧帖子，因为这个问题仍然存在于Bootstrap中，请提供我的意见来帮助那些追随我的人。

问题-关闭模态后，仍保留类“ modal-backdrop”的单个Div。

1）将btn-close类添加到两个关闭按钮：-

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button"  class="close btn-close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button"  class="btn btn-danger btn-close" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
</div>

2）在页面底部添加此Jquery：-

$(document).ready(function(){
        $('.btn-close').click(function(){
             $(".modal-backdrop").remove();
        });
 });

Answer 5

当返回的 HTML 包含除模态 div 之外的其他 DOM 元素（例如一些注释）时，可能会发生这种情况。所以正确的解决方法是更换

var modal = $(data);

与

var modal = $(data).filter('.modal');

并确保modal.length === 1

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

5 个答案: