How to automatically close the modal download dialog in a minute

Question

I am using bootstrap modal in one of my projects. I use timer functions to automatically display the bootstrap modality.

If the user does not close the boot modal within a minute. Then it automatically needs to close bootstrap modal.

How to configure a timer to automatically close startup?

Please help me solve this problem.

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 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 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

Try

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

Answer 2

You can use setTimeout in conjunction with the shown callback.

 $('#myModal').on('shown', function() { // remove previous timeouts if it opened more than once. clearTimeout(myModalTimeout); // hide it after a minute myModalTimeout = setTimeout(function() { $('#myModal').modal('hide'); }, 6e4); }); 

Answer 3

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

Answer 4

You can use this as:

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

Answer 5

Try this, $ ('# someselector'). modal ({show: false})

Answer 6

I use this method (bootstrap 3.2.0 and higher):

Add 'modal-auto-clear' to the modal class for each modal that you want to close automatically.

 <div class="modal fade modal-auto-clear" id="modal_confirmation" tabindex="-1" role="dialog"> ... </div> 

In jQuery:

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

All modals with the "modal-auto-clear" class now close 7 seconds after they open (you can, of course, change this time in jquery code).

If you want to create different auto-wedging times for one modal, you can do this:

Add the modal-auto-clear class to the modal class and add the data-timer = "3000" attribute to the 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">&times;</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:

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

Answer 7

Easy..! : D Try this person! Trust me.

 $(window).load(function(){ setTimeout(function(){ $('#myModal').hide(); }, 10000); });