jQuery 一分钟后如何自动关闭引导模式对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17102116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to automatically close the bootstrap modal dialog after a minute
提问by Austin Brunkhorst
I am using the bootstrap modal in one of my project. I'm using the timer functions for automatically showing the bootstrap modal.
我在我的一个项目中使用引导模式。我正在使用计时器功能自动显示引导模式。
If the user doesn't close the bootstrap modal for a minute. Then its automatically needs to close the bootstrap modal.
如果用户一分钟没有关闭引导模式。然后它自动需要关闭引导模式。
How to set the timer for closing the bootstrap modal automatically?
如何设置自动关闭引导模式的计时器？
Please kindly help me to solve this issue.
请帮助我解决这个问题。
Thanks in Advance :)
提前致谢 ：）
var mins;
var secs;
function cd() {
mins = 1 * m("");
secs = 0 + s(":"); // change seconds here (always add an additional second to your total)
console.log(mins);
console.log(secs);
redo();
}
function m(obj) {
for(var i = 0; i ";
if(mins :";
disp += "";
if(secs ";
return(disp);
}
function redo() {
secs--;
if(secs == -1) {
secs = 59;
mins--;
}
$('#myModal').on('shown', function() {
// remove previous timeouts if it's opened more than once.
clearTimeout(myModalTimeout);
// hide it after a minute
myModalTimeout = setTimeout(function() {
$('#myModal').modal('hide');
}, 5000);
});
document.getElementById('timer_container').innerHTML = dis(mins,secs);
if((mins == 1) && (secs == 45)) {
$("#myModal").modal('show');
$('#myModal').on('shown', function() {
// remove previous timeouts if it's opened more than once.
clearTimeout(myModalTimeout);
// hide it after a minute
myModalTimeout = setTimeout(function() {
$('#myModal').modal('hide');
}, 5000);
});
$('.timer-inc').click(function(){
$("#myModal").modal('hide');
href="includes/setSessionTime.php";
$.ajax({
type: "POST",
//data : {cat:"hai"},
cache: false,
url: href,
success: function(data){
console.log(data);
$("#results").html(data);
}
});
});
$('.timer-close').click(function(){
$("#myModal").modal('hide');
href="includes/clearcart.php";
$.ajax({
type: "POST",
//data : {cat:"hai"},
cache: false,
url: href,
success: function(data){
console.log(data);
$("#results").html(data);
}
});
});
$('#myModal').on('hidden', function () {
href="includes/clearcart.php";
$.ajax({
type: "POST",
//data : {cat:"hai"},
cache: false,
url: href,
success: function(data){
console.log(data);
$("#results").html(data);
}
});
});
}
else if((mins == 0) && (secs == 00)){
$("#myModal").modal('hide');
href="includes/clearcart.php";
$.ajax({
type: "POST",
//data : {cat:"hai"},
cache: false,
url: href,
success: function(data){
console.log(data);
$("#results").html(data);
}
});
}
else {
cd = setTimeout("redo()",1000);
}
}
function init() {
cd();
}
回答by Arun P Johny
Try
尝试
var myModal = $('#myModal').on('shown', function () {
clearTimeout(myModal.data('hideInteval'))
var id = setTimeout(function(){
myModal.modal('hide');
});
myModal.data('hideInteval', id);
})
回答by Austin Brunkhorst
You can use setTimeoutin conjuction with the shown callback.
您可以setTimeout与显示的回调结合使用。
$('#myModal').on('shown', function() {
// remove previous timeouts if it's opened more than once.
clearTimeout(myModalTimeout);
// hide it after a minute
myModalTimeout = setTimeout(function() {
$('#myModal').modal('hide');
}, 6e4);
});
回答by Fernando Ingunza
Function definitions
功能定义
function show_modal(){
$('#myModal').modal('show');
}
function hide_modal(){
$('#myModal').modal('hide');
}
Loading
加载中
$(window).load(function(){
$('#myModal').modal('show');
window.setTimeout(hide_modal, 60000);
});
回答by Kabir Hossain
You can use this as :
您可以将其用作：
setTimeout(function(){$('#myModal').modal('hide')},3000);
回答by klaaz
I am using this method (bootstrap 3.2.0 and higher):
我正在使用这种方法（引导程序 3.2.0 及更高版本）：
Add 'modal-auto-clear' to the modals class for every modal you want to close automatically.
将“modal-auto-clear”添加到要自动关闭的每个模态的模态类中。
<div class="modal fade modal-auto-clear" id="modal_confirmation" tabindex="-1" role="dialog">
...
</div>
In jQuery:
在 jQuery 中：
$('.modal-auto-clear').on('shown.bs.modal', function () {
$(this).delay(7000).fadeOut(200, function () {
$(this).modal('hide');
});
})
All modals with class 'modal-auto-clear' will now close 7 seconds after they opened (You can change this time in the jquery code of course).
所有具有“modal-auto-clear”类的模态现在将在它们打开后 7 秒关闭（当然，您可以在 jquery 代码中更改此时间）。
If you want to create different autoclose times per modal you can do this:
如果你想为每个模态创建不同的自动关闭时间，你可以这样做：
Add the class 'modal-auto-clear' to the modals class and add attribute data-timer="3000" to the modals div:
将类 'modal-auto-clear' 添加到 modals 类并将属性 data-timer="3000" 添加到 modals div：
<div class="modal fade modal-auto-clear" data-timer="3000" id="modal_confirmation" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Your title</h4>
</div>
<div class="modal-body padded">Your body</div>
<div class="modal-footer">
<button type="button" id="close" data-dismiss="modal" aria-label="Close" class="btn btn-primary" style="display:none;">Close</button>
</div>
</div>
</div>
</div>
In jQuery:
在 jQuery 中：
$('.modal-auto-clear').on('shown.bs.modal', function () {
// if data-timer attribute is set use that, otherwise use default (7000)
var timer = $(this).data('timer') ? $(this).data('timer') : 7000;
$(this).delay(timer).fadeOut(200, function () {
$(this).modal('hide');
});
})
回答by user1390282
Try this, $('#someselector').modal({show: false})
试试这个， $('#someselector').modal({show: false})
