[英]Modal is transitioning error with bootstrap4 alpha6 modal
I am using bootstrap4 alpha 6 Modal, I am getting: 我正在使用bootstrap4 alpha 6 Modal,我得到:
Error: Modal is transitioning
That happen when I am trying to re-trigger the same modal again with dynamic data through JavaScript function as following: 当我试图通过JavaScript函数再次使用动态数据重新触发相同的模态时,会发生这种情况,如下所示:
function openModal(title, text) {
$('.modal-title').text(title);
$('.modal-body p').text(text);
$('#modalAlert').modal('show');
}
I tried to use setTimeout function, but didn't work as in this article: https://github.com/twbs/bootstrap/issues/21687 我尝试使用setTimeout函数,但没有像本文中那样工作: https : //github.com/twbs/bootstrap/issues/21687
Any suggestions? 有什么建议么?
Worked with removing fade
from parent div class. 处理从父div类中删除fade
。
Final Modal code ( Adding here for posterity ) : 最终模态代码( 此处为后代添加 ):
HTML HTML
<div class="modal loadingModal" id="applemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-body">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
<img src="ico/4.svg">
</div>
</div>
</div>
</div>
</div>
JS JS
$.ajax({
type: "GET",
url: "/getTimeline",
data: {
'dateTime': selected
},
async: true,
beforeSend: function () {
$('#applemodal').modal({
backdrop: 'static',
keyboard: false
});
},
success: function(data) {
$('#applemodal').modal('toggle');
}
});
i am using bootstrap 4 Modal too, My solution; 我正在使用bootstrap 4 Modal,我的解决方案;
$(document).on('show.bs.modal', '.modal', function (event) {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
First open the modal and then try to find the DOM elements that's inside modal (eg. $('.modal-title')
and $('.modal-body p')
) 首先打开模态,然后尝试找到模态内部的DOM元素(例如。 $('.modal-title')
和$('.modal-body p')
)
Changing the order of executing your function might work: 更改执行函数的顺序可能有效:
function openModal(title, text) {
$('#modalAlert').modal('show');
$('.modal-title').text(title);
$('.modal-body p').text(text);
}
Finally, make sure that modal is open/visible in the screen when you access HTML that's inside the modal. 最后,当您访问模式内的HTML时,确保模式在屏幕中打开/可见。
请将您的按钮类型='submit'设置为type ='button'
My solution was to open the model programmatically rather than through the link. 我的解决方案是以编程方式而不是通过链接打开模型。
Instead of: 代替:
<A href="javascript: void(0);" data-toggle="modal" data-target="#myModal" title="Open My Modal">Open My Modal</A>
Use: 采用:
<A href="javascript: void(0);" ID="myLink" title="Open My Modal">Open My Modal</A>
$('#myLink').on('click', function(){
$('#myModal').modal('show');
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.