Bootstrap modal('hide') 没有删除所有应用的属性属性答案

【问题标题】：Bootstrap modal('hide') isn't removing all applied attribute propertiesBootstrap modal('hide') 没有删除所有应用的属性属性
【发布时间】：2015-07-24 21:18:14
【问题描述】：

好的，所以我有一个模态：

    <div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content center-block" style="display: table;">
            </div>
        </div>
    </div>

在我的页面上，我使用了一个使用 ajax 从另一个页面加载模式内容的按钮。在页面底部，我有 2 个按钮。一个用于关闭模式，另一个用于提交表单。

<div class="modal-body">
    <div class="form-horizontal">

.....insert rest of the modal content....

        <div class="modal-footer">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" id="approve-btn" value="Create" data-toggle="modal" data-target="#modal-container" class="btn btn-primary" />
                <input type="button" id="cancel-modal" value="Cancel" data-dismiss="modal" class="btn btn-default modal-close-btn" />
            </div>
        </div>
    </div>
</div>

点击关闭不会导致任何问题。 modal-open 类从正文中删除，padding-right: 17px 从样式属性中删除，页面内容恢复到原来的样子。现在，如果我要单击提交按钮，则会调用一个事件处理程序来使用 ajax 提交表单。成功将内容添加到我拥有的表中，应用样式，调用$('#modal-container').modal('hide');，并执行了与我的问题无关的另外 2 个调用。

$('#modal-container').on('submit', '#associatelicensemodalfrm', function (e) {
    e.preventDefault();
    var data = $(this).serializeArray();
    $.ajax({
        url: '/software/newpurchase',
        type: 'POST',
        data: data,

        success: function (data) {
          .... code involving my table and transforming the data....
            table.row.add(row).draw();
            $('.date-picker').datepicker();
            $('#modal-container').modal('hide');
            $('#compliancefieldsfrm')[0].childNodes[1].children[2].innerText = aggregateQuantityPurchased();
            calculateCompliance();
        }
    })
});

一旦调用modal('hide');，我就有了一个事件处理程序。处理程序用于hidden.bs.modal 事件，在调用modal('hide') 之后立即调用该事件，除非您有hide.bs.modal 的处理程序。然后在那个之后立即调用它。

//clear modal cache, so that new content can be loaded
$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
    $('.modal-content').html('');
});

上面的代码将.modal-content div 以及第一行重置为空字符串，我现在忘记了它的作用。在此处理程序完成后，modal-open 类将从 class 属性中删除，但 padding-left: 17px 不会从 style 属性中删除。如果您要调用模态并再次提交表单，那么您将拥有padding-left: 34px。提交此表单足够多次后，您可以看到整个页面现在看起来像是左对齐，这是完全错误的。

我尝试从模态表单中删除data-toggle="modal"，但是当$('#modal-container').modal('hide'); 运行时没有任何反应。未触发隐藏事件。我尝试删除$('#modal-container').modal('hide'); 并离开data-toggle="modal"，但它仍然存在。当我删除data-toggle 和data-target 时，同样的事情发生了。模态并没有消失。这就是我的问题与我看到的其他答案的不同之处。明确地，隐藏/删除模式的javascript和数据属性方式都不起作用。我必须同时使用两者，但样式不会消失。我在搞砸什么？

【问题讨论】：

您可能会发现使用 Bootbox.js 之类的东西更容易，它可以让您根据需要构建 Bootstrap 模态。如果您想走这条路，我可以根据您的代码发布一个示例。
@TiesonT。如果它解决了我的问题，我会尝试 Bootbox.js。我很惊讶没有其他人遇到这个问题。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

想通了！

我曾经使用 pagedlist 插件来表示模式中的内容，在 loaded.bs.modal 上我会调用 .removeData('bs.modal');。这样，当您单击以转到表格的下一页时，加载了更多内容时，所有内容都会更新。不再需要该模式，因此我删除了该行，现在它可以工作了。

【讨论】：

【解决方案2】：

我只在使用带有异步更新的模式时遇到了这个问题。添加 EndHandler 以修复填充问题。

注意——在我的例子中，它是在 body 中添加 padding-right。你提到了 padding-left，所以你需要调整下面的代码来纠正它。

在你的 JS 中，添加：

Sys.Application.add_init(appl_init);
function appl_init() {
    var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
    pgRegMgr.add_beginRequest(BeginHandler);
    pgRegMgr.add_endRequest(EndHandler);
}
function BeginHandler(sender, args) {
    // Add anything here that you want to occur just before the async post is performed
}

function EndHandler(sender, args) {
    $('body').removeClass('modal-open');
    $('body').css("padding-right", "0px");  // Bootstrap will calc the width of the browser toolbar and add this padding each postback (cumulatively)
    $('.modal-backdrop').remove();
    $('#modal-container').modal('show');  // Remove this line if you do not want to keep the modal open
}

您甚至可以将上述 EndHandler 的前三行添加到您的 Ajax Success 块中。不过我从来没有尝试过，所以我只是在猜测。

【讨论】：