我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
当前回答
这行代码在许多搜索后解决了我的问题,我想关闭ajax成功的模式:
$('#exampleModal').modal('hide');
$("[data-dismiss=modal]").trigger({ type: "click" });
非常感谢,曼纽尔·费尔南多 https://stackoverflow.com/a/27218322/5935763
其他回答
//Create modal appending on body
myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
$('body').append(myModalBackup.clone());
myModalBackup = null;
});
//Destroy, clone and show modal
myModalBackup = $('#myModal').clone();
myModalBackup.find('.modal-backdrop').remove();
$('#myModal').modal('hide').remove();
myModalBackup.find('.info1').html('customize element <b>1</b>...');
myModalBackup.find('.info2').html('customize element <b>2</b>...');
myModalBackup.modal('show');
提琴——> https://jsfiddle.net/o6th7t1x/4/
在应用了最高评级的解决方案后,我有一个问题,它打破了将来情态动词正确打开。我已经找到了我的解决方法
element.on("shown.bs.modal", function () {
if ($(".modal-backdrop").length > 1) {
$(".modal-backdrop").not(':first').remove();
}
element.css('display', 'block');
});
我在提交表单时也遇到了同样的问题。解决方案是将按钮类型从submit更改为button,然后处理按钮单击事件,如下所示:
'click .js-save-modal' () {
$('#myFormId').submit();
$('#myModalId').modal('hide');
}
我也有同样的问题。
然而,我使用bootbox.js,所以这可能是与此有关。
不管怎样,我意识到这个问题是由一个元素与它的父类具有相同的类引起的。当其中一个元素被用来绑定一个点击函数来显示模态时,就会出现问题。
这就是问题的原因:
<div class="myElement">
<div class="myElement">
Click here to show modal
</div>
</div>
更改它,以便被点击的元素不具有与其父类、任何子类或任何其他父类相同的类。通常在绑定单击函数时这样做可能是一个很好的实践。
从https://github.com/twbs/bootstrap/issues/19385
Modal的显示/隐藏方法是异步的。因此,代码如下: foo.modal(“隐藏”);bar.modal(“秀”);是无效的。你需要等待 实际完成的显示/隐藏(通过侦听 显示/隐藏事件;看到 http://getbootstrap.com/javascript/#modals-events) 再次显示或隐藏方法。
我有这个问题时,我打开相同的模式两次太快,所以一个简单的解决方法是检查它是否已经显示,然后不显示它再次:
$('#modalTitle').text(...);
$('#modalMessage').text(...);
if($('#messageModal').is(':hidden')){
$('#messageModal').modal('show');
}