概述
在ajax调用期间,进度对话框会显示,然后在完成或失败时应该通过调用$("#progessDialog").modal("hide");
来隐藏。似乎hide
事件没有触发。我在ajax失败处理程序中定义了一个事件钩子来记录何时触发了隐藏事件,它从未记录,但另一个日志按预期打印出来:
$('#progessDialog').on('hidden.bs.modal', function (e) {
console.log('calling modal hide');
});
复现步骤:
- 点击值之一(555或222)以触发内联编辑
- 更改该值
- 按Tab键退出
有趣的事情
在模态框拒绝隐藏和js调用完成后,当我在开发者控制台输入$("#progessDialog").modal("hide")
时,模态框会按预期隐藏。
注意:还未完成, 所以请勿指责用户界面,但是我乐意接受一些建设性的批评来改进UX/JS。现在没有任何验证,下一步将进行验证。
我看到其他几个类似但不完全相同的SO问题(这些问题似乎有一些模态框被隐藏但背景仍在显示——我的情况是整个模态框都隐藏了)。
这里有一个jsfiddle,可以重现这个问题: https://jsfiddle.net/willtx/8dpL5rLd/29/
模态框
<div class="modal fade" id="progessDialog" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="progessDialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<h5 class="modal-title" id="progessDialoglLabel">Processing...</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
$("#progessDialog").modal("hidden");
,应该改为$("#progessDialog").modal("hide");
。 - Tieson T.