Closing and Opening Twitter Bootstrap Modals Quickly Causing Issue - javascript

I have a situation where I have a model open and when I close it and open it very quickly I am seeing a really very odd behavior like backdrop is not disappearing and modal is not showing.
My code is as follows
//Opening and Closing Modals
$("#modal").modal("show");
$("#modal").modal("hide");
$("#modal").modal("show");
I created a JSFiddle.

You should only hide the modal when it is completely shown.
shown.bs.modal
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).
Review the modal events here
http://getbootstrap.com/javascript/
$('#myModal').on('show.bs.modal', function (e) {
$('#myModal').modal('hide');
})

Related

Closing one bootstrap modal and opening another one immediately causes scrolling issues

I have two modals. When I close one and open the other right after, I have scrolling issues. Instead of scrolling in the modal, the content behind it gets scrolled. To solve this, I did the following:
$('#firstModal').on('hidden.bs.modal', function (e) {
$('#secondModal').modal();
$('#firstModal').off('hidden.bs.modal');
});
$('#firstModal').modal('hide');
I was wondering, is there a more elegant solution that does not involve using the event listener?
The issue is the modal-open class has not been removed by the time you show the second modal. Therefore, as soon as it is added (by opening the second modal) it is removed because the first one finished closing. You can work around this with the following code:
$('#firstModal').on('hidden.bs.modal', function (e) {
setTimeout(function() {
$('#secondModal').modal();
});
});

Android click event div element

I am having the following issue with click/touchstart event on Android (as far as I know only happening on Android),
1. the element triggers a modal window.
2. one of the buttons/links inside this modal gets triggered instantly without giving the user the option to make a choice.
It is of course required for the visitor/user to view the modal content before being redirected to a link to another page from one of those buttons.
I believe this is due to the 'touchstart' event bind to this div, which I am using since click events on divs for touch devices don't work.
I am using jQuery to make this work, and on iOS there doesn't seem to appear any issue.
$(document).on('click touchstart','.mydiv', function(e) {
e.preventDefault();
// open modal
});
Any suggestions please.
Try this:
$(.mydiv).on('touchstart', function(e) {
e.preventDefault();
// open modal
});
cheers

Prevent double-click event on lower layer when double-click\hiding a higher layer

So I have a form where double-clicking a field brings up a custom modal window. The buttons for "Save" and "Cancel" on the modal window have "click" events that call hide() on the modal window layer. However, some of our users naturally double-click things. Double-clicking the save or cancel buttons fires the click event and hides the modal window but also fires the double-click event of the field that was under the modal window causing the modal window to display again. I know using a setTimeOut() and delaying the hide() of the modal window will resolve the issue but I prefer not to degrade the responsiveness of the UI if possible. Any suggestions?
Here is a fiddle to generally explain the problem.
https://jsfiddle.net/e51rc24j/4/
$(function() {
$(".field").on("dblclick", function(ev) {
$(".hoverlayer").show();
});
$(".hoverlayer").on("click", function(ev) {
var thisLayer = this;
$(thisLayer).hide();
/* PUTTING IN DELAY ON HIDE SOLVES PROBLEM BUT I PREFER TO NOT DELAY UI RESPONSIVENESS IF POSSIBLE
setTimeout(function(){
$(thisLayer).hide();
}, 300);*/
});
});
At first I thought the problem was propagation, so I added a stopPropagation to your event. But then I found out that it's not the double click that's propagating. The problem is something completely different, namely that the SECOND click (of the double click to close the black overlay) LANDS on the input field again, which triggers the double click event on the input box again.
So all you have to do, is move the SAVE and CANCEL buttons so they are not directly on top of the input field.
I have made a little change to your jsfiddle to illustrate:
https://jsfiddle.net/e51rc24j/6/
If you double click in the "PROBLEM", the modal black div will open again, because your second click lands INSIDE the <input> text field.
However, if you double click anywhere else in the black div ("Not a problem"), it will not open.

How to scroll a bootstrap modal with arrow keys up - down

I tried this:
// this = modal
$(this).focus();
I tried tha above one as well as tried to trigger a click event on it but didn't work!
EDIT
This is the website i'm working on : "website", you can launch the modal and see that it does not scroll with arrow keys.
But if you click on the modal it becomes scrollable, and that's why I tried to trigger the click event with jquery
Try adding the focus on the first a hyperlink element and see what that does:
$('.modal a:first-child').focus();

Foundation - Opening a modal upon closing another modal

I have a web page that opens a reveal modal on load, and in this modal, I have a link that can open a 2nd modal. When the 2nd modal closes (either by clicking the close button, or by clicking outside the modal), I would like to reopen the first.
For the close button, I can do it via adding a data-reveal-id to the link that has the close-reveal-modal class. But when I try to bind to the close property, the 1st modal opens, but then the background changes back to normal, and the 1st modal can no longer be closed by clicking outside the modal. Then, on closing the 1st modal with the close button, the whole screen darkens as though a modal was opening. Am I doing something wrong, or is this a bug?
My code is as follows:
$(function(){
$("#modal2").foundation("reveal", {
close: function() {
$("#modal1").foundation("reveal", "open");
}
});
$(document).foundation();
});
OK, so after some experimentation, I found out that in order to do what I wanted to I had to bind the function, not set it in the initialisation phase. Thus:
$("#modal2").bind("closed", function() {
$("#modal1").foundation("reveal", "open");
});
And I set this script after the declaration of the 2 modals.

Categories

Resources