This question already has answers here:
How to automatically close the bootstrap modal dialog after a minute
(6 answers)
Closed 8 years ago.
I'm struggling to automatically close Bootstrap modals after a set time period.
Here's the js code I'm using to close the modal in 4 seconds:
setTimeout(function() { $('#myModal').modal('hide'); }, 4000);
Two basic problems:
(A) When the html page (that contains the modals) loads, the modal Timeout seems to run before the modal is even displayed. The modal is set to display after clicking on a link in the page. If the link is not clicked immediately when the page loads, the modal will only appear briefly and then close immediately because essentially the Timeout period started when the html page loaded, not when the modal was displayed.
(B) If the user clicks on the link to launch the modal a second time (or 3rd time, 4th time, etc.), the modal displays properly but does NOT close after the time period. It just stays open until the user manually closes it.
So...the two questions are:
(1) How do I get the modal Timeout period to wait until the modal is displayed before running the clock.
(2) How do I get the modal to display a second and third time with the proper Timeout function still working?
(The answer(s) proposed at this link below looked promising, but aren't working for me. Maybe they don't work on Bootstrap 3? How to automatically close the bootstrap modal dialog after a minute )
This code below looked very promising, but didn't work even after changing 'shown' to 'shown.bs.modal'. Or maybe I'm placing this code in the wrong place?
var myModal = $('#myModal').on('shown', function () {
clearTimeout(myModal.data('hideInteval'))
var id = setTimeout(function(){
myModal.modal('hide');
});
myModal.data('hideInteval', id);
})
Many thanks for any suggestions!
I'm not pretty sure about your html so I did a complete example:
html:
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Open Modal</a>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4>Header</h4>
</div>
<div class="modal-body">
Modal Content
</div>
</div>
</div>
</div>
js:
$(function(){
$('#myModal').on('show.bs.modal', function(){
var myModal = $(this);
clearTimeout(myModal.data('hideInterval'));
myModal.data('hideInterval', setTimeout(function(){
myModal.modal('hide');
}, 3000));
});
});
The main difference with your code:
I set a time for timeout (3000)
I set myModal variable inside
callback
I guess it depends on how you display your modal. But you could set the timeout in the event listener?
Here is a JSFiddle to demonstrate how you can achieve it. Basically you add the timeout in the function that will be executed when the event happens.
// Select the element you want to click and add a click event
$("#your-link").click(function(){
// This function will be executed when you click the element
// show the element you want to show
$("#the-modal").show();
// Set a timeout to hide the element again
setTimeout(function(){
$("#the-modal").hide();
}, 3000);
});
If the event you listen for is a click on a link you could have to prevent the default action too by using event.preventDefault(). You can find more info on that here
I hope this helps.
Related
How exactly do I open one modal from another modal in meteor? I'm using bootstrap-3-modal package
When I try clicking on the confirm button of one modal, it must close that modal and open a new modal. Somehow,it doesn't seem to work. Here's what I have:
Template.addMoreTemplateConfirmationModal.events({
'click #confirmMorePGInstance'(event){ // this is the confirm button on addMoreTemplateConfirmationModal modal
Modal.show('createTemplateModal'); // this does not work.
// Modal.hide('addMoreTemplateConfirmationModal');
},
Have you tried closing the modal before showing the next one?
Otherwise you could maybe trigger the second modal on the onDestroyed event, although there might be a better way.
Template.addMoreTemplateConfirmationModal.onDestroyed(function() {
Modal.show('createTemplateModal');
});
Simply use setTimeout which runs only once after given miliseconds (300 is the miliseconds in the example below).
'click #confirmMorePGInstance': function(){
// close modal here
Meteor.setTimeout(function () {
//open the next modal here
}, 300);
},
PS: I suggest using 50-100 miliseconds more than the closing effect speed.
I've been having some problems with a JQuery code.
I'm trying to make a "dynamic" website, so every time you click on a link ('a' elements have a 'link' attribute), my code takes the 'link' attribute and passes it to jQuery's load() function. Thing is, I wanted to let the user know the content is loading, so I thought I could show a modal before start loading, and hiding it when finished, but it doesn't work. The first time I click on a link, modal stays there, and doesn't go away. However, from second time on, I click any link and everything works perfectly.
Why does it only fail to close the first time?
$(document).on("click", "[link]", function() {
$("#cargando").modal('show');
$('#contenido').load($(this).attr('link'), function() {
$('#cargando').modal('hide');
$('.modal-backdrop').hide();
});
});
Extra info: this code, and the modal HTML are together in a file named dyn.html, which is included at the end of the rest of the pages.
EDIT, modal code:
<div class="modal modal-static fade" id="cargando">
<div class="modal-dialog"><div class="modal-content">
<div class="modal-body"><div class="text-center">
<h4>Cargando...</h4>
</div></div></div></div></div>
EDIT, it works with:
$(document).on("click", "[link]", function() {
$('#cargando').modal('show');
$('#contenido').load($(this).attr('link'), function() {
$('#cargando').hide();
$('.modal').hide();
$('.modal-backdrop').hide();
});
});
It's messy but it's the first thing that works.
$('.modal').hide();
replace this code by applying timeout function. So it would be like.
setTimeout(function(){
$('.modal').hide();
},100);
Here 100 is the time out duration.
Well, I have been in this situation. But, here is what I found, I try to avoid using modal('show') when the modal wants to pop up, so what I prefer to do is to link the modal to an element and set the right attribute on that element and the modal will pop up.
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
so try this one and let me know the result. Don't use the
$("#cargando").modal('show');
this is my very first question here. I want to prevent reloading a page from browser reload button only when a modal is open. otherwise it can be reloaded. I should show an alert saying that the modal should be closed before reloading or something like that.
HTML:
<div id="newwr" class="modal newwr">
<div class="modal-content">
<h4>Create a WR</h4>
<p>...</p>
</div>
</div>
JAVASCRIPT:
<script>
window.onbeforeunload = function() {
if (modal.isOpen()) {
alert("Modal should be closed before reloading the page");
}
}
</script>
You could use onbeforeunload to provide that kind of response.
window.onbeforeunload = function() {
if (modal.isOpen()) {
return "Modal should be closed before reloading or something...";
}
}
You'll need to determine whether the modal is open or not somehow. You could keep track of the state internally (as I've tried to show with pseudocode here), or by checking the DOM to see if your modal is present and/or visible.
As stated in the comments, we can provide more specific help once we know more about your code, but hopefully this will point you in the right direction.
I'm trying to create a Bootstrap modal for quick shop purpose. When clicking a button I've added a small timeout function to let the modal load everything before it shows up. Just for usabillity.
This works perfectly when clicking the button inside a normal plain div/element.
The problem I'm facing is that it doesn't work when clicking a button inside a dynamic created div/element.
I have a carousel (owl-carousel) with several items in it and each item has a quick shop button.
When clicking this button the modal pops up but skips the loading part. So what happens is that when opening one modal and closing it and then open a next modal the content from the first modal is displayed and after a few seconds the content of the new modal is displayed.
It looks like the loading part of the script is skipped when clicking on a dynamic created element/div/button.
What I have is this:
// dynamic created items inside owl-carousel//
<div class="item">
<a data-toggle="modal" data-target="#quick-shop-modal" data-vid="12384069" data-handle="12384069.html">Quick shop</a>
</div>
// the modal //
<div id="loader"></div>
<div aria-hidden="false" role="dialog" tabindex="-1" id="quick-shop-modal" class="modal fade" data-show="false">
.....
</div>
// The script //
$(document).ready(function(){
$(document).on('click', '.quickview', function(e){
e.preventDefault();
$('#loader').show();
var url = $(this).data('handle') + '/?format=json';
var vid = $(this).data('vid');
var $target = $($(this).data('target'));
// it looks like this part is skipped
$target.data('triggered',true);
setTimeout(function() {
if ($target.data('triggered')) {
quick_shop(url, vid);
};
}, 1000);
return false;
});
});
Does anyone know what's going wrong with the code?
Consider using a callback function instead of a fixed timeout duration.
I'm using Bootstrap 2.3.2, and I'm using modal dialogs like this:
<div id="notice1" class="modal hide fade">
<div class="modal-body">
<h4>This is a dialog for user...</h4>
</div>
...
</div>
and
var notice1 = $("#notice1");
notice1.modal({
keyboard: false,
backdrop: "static",
show: false
});
// Show the dialog
notice1.modal("show");
// Close the dialog
notice1.modal("hide");
Most of the the time, the above works fine and the modal dialog are opened and closed programmatically. However, in some rare cases, calling .modal("hide") does not close the dialog at all though the dark backdrop is removed.
This is a huge potential issue because the dialog may get stuck on the screen and block part of the content.
Is there a reliable way to ensure the dialog is always closed after calling .modal("hide")? Or better yet, how do we ensure a consistent hide behavior from Bootstrap? I don't want to remove the dialog completely from the DOM, because the same dialog may be re-used on the page.
You can hide the modal by using the following code.
$("#notice1").hide();
$(".modal-backdrop").hide();
According to documentation: http://getbootstrap.com/2.3.2/javascript.html#modals
You can catch the hidden event and force the display:none property.
notice1.on('hidden', function () {
$(this).css("display", "none")
})
I am using 1.9.x, below code working..
$("#yourModalWindow").modal('hide');