Question

我正在使用ajax加载模态的内容。我有一个提交模态窗体的按钮，并且假设在完成处理ajax提交时关闭模态，以便它可以更新页面底部的表格。更新表并调用$('modal-container').modal('hide');

后，它不会关闭模态

此模式包含一个在其上具有分页的表。在'loaded.bs.modal'事件中，我将具有modal-pagination-link类的所有链接转换为ajax链接。我正在使用的分页库只允许传递链接的url和参数，这就是我加载后进行链接转换的原因。当您单击其中一个链接时，它会更新该表。单击链接后，为了防止模态本身关闭，我调用$(this).removeData('bs.modal');。我发现这是$(this).removeData('bs.modal');阻止任何$('#modal-container').modal('hide');工作的原因。

如果在模态中单击链接并且仍允许.modal('hide')仍然有效，如何阻止模态关闭？我可以拨打什么而不是$(this).removeData('bs.modal')？

$(function () {
// Initialize modal dialog
// attach modal-container bootstrap attributes to links with .modal-link class.
// when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
$('body').on('click', '.modal-link', function (e) {
    e.preventDefault();
    $(this).attr('data-target', '#modal-container');
    $(this).attr('data-toggle', 'modal');
    $('#modal-container').draggable();
    var updateTarget = $(this).attr('data-ajax-update');
    $('modal-update-target').attr('value', updateTarget);
});
// Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
$('body').on('click', '.modal-close-btn', function () {
    $('#modal-container').modal('hide');
});
//clear modal cache, so that new content can be loaded
$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
    $('modal-update-target').removeAttr("value");
});

$('#modal-container').on('click', '.modal-pagination-link', function (e) {
    var updateTarget = $(this).attr('data-ajax-update');
    $('modal-update-target').attr('value', updateTarget);
});

$('#modal-container').on('loaded.bs.modal', function () {
    $(this).removeData('bs.modal');
    $('modal-update-target').removeAttr("value");
    var pagcontainers = $(this).find('#modal-pagination');
    var hrefs = $(pagcontainers).find('a').addClass('modal-pagination-link')
                                            .attr('data-ajax', 'true')
                                            .attr('data-ajax-mode', 'replace')
                                            .attr('data-toggle', 'modal')
                                            .attr('data-target', '#modal-container')
                                            ;

});

$('#modal-container').on('submit', '#asset-modal-frm', function (e) {
    e.preventDefault();
    if (confirm("Are you sure?")) {
        var data = $(this).serializeArray();
        $.ajax({
            url: '/licenses/allocate',
            type: 'POST',
            data: data,

            success: function (data) {
                for (var i = 0; i < data.length ; i++) {
                    $('#allocatedLicenses tr:last').after(
                    $("<tr>").append($("<td>").text(data[i].name))
                                    .append($("<td>").text(data[i].manufacturerItem.serialNumber)));
                }
                $('#modal-container').modal('hide');
            }
        })
    }
});
});

我的HTML：

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

Answer 1

您使用错误的方法隐藏元素。

改变这个：

$('#modal-container').modal('hide');

对此：

$('#modal-container').hide();

或者如果您想要从页面中完全删除它，请将其更改为：

$('#modal-container').remove();

Modal不会关闭ajax成功

1 个答案: