如何在一分钟后自动关闭引导模式对话框

我在我的一个项目中使用bootstrap模式。 我正在使用计时器function自动显示引导程序模式。

如果用户没有关闭bootstrap模态一分钟。 然后它自动需要关闭bootstrap模式。

如何设置自动关闭引导模式的计时器？

请帮助我解决这个问题。

提前致谢 ：）

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(); } 

Answer 1

尝试

 var myModal = $('#myModal').on('shown', function () { clearTimeout(myModal.data('hideInteval')) var id = setTimeout(function(){ myModal.modal('hide'); }); myModal.data('hideInteval', id); }) 

Answer 2

您可以将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); }); 

Answer 3

function定义

 function show_modal(){ $('#myModal').modal('show'); } function hide_modal(){ $('#myModal').modal('hide'); } 

载入中

 $(window).load(function(){ $('#myModal').modal('show'); window.setTimeout(hide_modal, 60000); }); 

Answer 4

您可以将其用作：

  setTimeout(function(){$('#myModal').modal('hide')},3000); 

Answer 5

试试这个，$（’＃someselector’）。modal（{show：false}）

Answer 6

我正在使用这种方法（bootstrap 3.2.0及更高版本）：

将“模态自动清除”添加到要自动关闭的每个模态的模态类中。

 
 ...  

在jQuery中：

 $('.modal-auto-clear').on('shown.bs.modal', function () { $(this).delay(7000).fadeOut(200, function () { $(this).modal('hide'); }); }) 

所有类型为’modal-auto-clear’的模态现在将在打开后7秒关闭（您可以在jquery代码中更改此时间）。

如果要为每个模态创建不同的自动关闭时间，可以执行以下操作：

将类“modal-auto-clear”添加到modals类，并将属性data-timer =“3000”添加到modals div：

 
 
 
 
 × 
Your title
 
 
Your body
 
 Close 
 
 
  

在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'); }); })