在此示例中,单击导航菜单上的contact
选项卡将打开一个 Bootstrap 模式。如果用户在模态框的文本框中输入小于 10 的字符串,则会出现警告并且模态框不会关闭。如果字符串大于 10,那么一条消息将附加到模态,说类似 success...
并且模态应该延迟一段时间然后消失。使用当前代码,验证部分和模态显示有效,但在它消失之前没有延迟。为什么当前代码不起作用,我该如何解决?
fiddle js
$(document).ready(function () {
$('#modalClose').click(function () {
var validResult = getLength('#tbName', 10);
if (validResult) {
var successMessage = $('<div>').text('Successfully saved to database...').css('color', 'green');
$('.modal-body').append(successMessage);
$('#contact').delay(5000).modal('hide');
}
else {
alert('input did not meet validation, try again');
$('#tbName').val('').focus();
}
});
function getLength(el, x) {
var len = $(el).val().length
return len > x
}
$('#contact').on('hide.bs.modal', function () {
$('#tbName').val('');
});
$('#contact').on('shown.bs.modal', function () {
$('#tbName').focus();
});
});
最佳答案
你应该使用 setTimeout delay 而不是 delay
适用于动画队列。
window.setTimeout(function(){
$('#contact').modal('hide');
}, 2000); //2000 milliseconds i.e 2 seconds, you can change it to the value as you need
关于javascript - Bootstrap 模态立即关闭,应该延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19939937/