Question

我的模态表单成功发出了Ajax请求。收到的数据显示在后台。调用模态由data- *属性完成，因为bootstrap示例显示here。但这种模式并没有被解雇。我试着添加

OnSuccess = "$('#searchForm').modal('hide');"

到我的Ajax.BeginForm。但是这并没有消除模态在背景上施放的淡化效果。

我的观点是：

<div class="modal fade" id="searchForm" tabindex="-1" role="dialog" aria-labelledby="searchFormLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="searchFormLabel">Search Here</h4>
            </div>
            <div class="modal-body">
                @using (Ajax.BeginForm(new AjaxOptions
                {
                    HttpMethod = "GET",
                    InsertionMode = InsertionMode.Replace,
                    UpdateTargetId = "results",
                    OnSuccess = "$('#searchForm').modal('hide');"
                }))
                {
                    // input fields and submit button are here
                }
            </div>

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

我错过了什么吗？

Answer 1

在这种情况下，您通过modal打开data-attributes，然后使用jQuery关闭它。因此，在某种程度上使用两种模态切换方法，这两种方法相互冲突。因此，删除数据属性并仅使用jQuery显示/隐藏modal。

试试这个：

$('#searchForm').modal('show'); //for showing the modal

隐藏在OnSuccess上：

OnSuccess = "unloadModal"

函数unloadModal将是：

function unloadModal() {
    $('#searchForm').modal('hide');
};

Answer 2

我的场景：通过MVC局部视图提供Bootstrap模式的内容，并在其中使用Ajax POST调用。在ajax-call完成后自动关闭模态解决了我的情况有点＆＃34;组合＆＃34; OnComplete / OnSuccess处理函数中的调用：

function onAjaxCompleted()
{
    $('#searchForm.close').click(); 
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();
}

希望这对你也有帮助。

成功的Ajax请求后关闭Bootstrap Modal表单

2 个答案: