We Keep Coding

How to make a bootstrap modal window close when click outside again?

I'm working in a project using bootstrap framework and I read there are different ways to open a modal window, in my case I open it with javascript with this code:
$('#formVenta').modal({backdrop: 'static', keyboard: false});
I did this because the client asked me to avoid close the modal when click outside but now he wants to press click outside and close the modal again but when there is no content inside a specific div inside my window
<div id="content_goes_here"></div>
I think to solve this in this way
$(document).click(function(e) {
//check if modal is open
if ($('#formVenta').is(':visible')) {
//check if div has content
if ($('#content_goes_here').html().length > 0) {
//do something
}
}
});
The problem I see is that there are text input outside that div and If I want to search something it will close when I make click in the input because there will be not content yet inside the div and I want to avoid this issue.
Is there a way where only when I make click outside the modal window check if the div is empty and make the opposite of the way I opened the window in this case the opposite of this?
$('#formVenta').modal({backdrop: 'static', keyboard: false});
for example change the value of the property backgrop.
I hope you can help me, thanks.

sorry it took a while to find the right properties but here is the best example
$('#formVenta').data('bs.modal').options.backdrop = false; or
$('#formVenta').data('bs.modal').options.backdrop = static;
you can take a look at the current properties you have set by doing
alert(JSON.stringify($('#myModal3').data('bs.modal').options)); or change the alert to console.log()
so you can put an event on the div for when it changes to run the validation function and inside of the validation function you can change the options of the modal with the above code

Bootstrap modal close issue

I am trying to work the bugs out of my modal. I am using Bootstrap, Angular and ng-Route. I recently noticed on mobile (and then on desktop) when I push the back button with the modal open it leaves a gray overlay and you cannot click anything. So the solution I found that partially fixes the problem is to add this script:
$(".modal").on("shown.bs.modal", function() { // any time a modal is shown
var urlReplace = "#/" + $(this).attr('id'); // make the hash the id of the modal shown
history.pushState(null, null, urlReplace); // push state that hash into the url
});
// If a pushstate has previously happened and the back button is clicked, hide any modals.
$(window).on('popstate', function() {
$(".modal").modal('hide');
});
This works great then the user presses the back button however when the user closes the modal by clicking outside of the modal or hitting escape the urlReplace remains in the browser address bar. I want to get it to change back to the previous when ever the modal is closed.
If that issue cannot be resolved I at least would like this other issue to be fixed which is this: When the user closes the modal by clicking outside or hitting escape the urlReplace remains in the browser address which is fine but when the user then goes to click a link in my nav bar it doesn't take them to the link it goes to a blank page with the urlReplace still in the address bar and then I can click a link in the nav bar again and it will go to the proper link which I find strange not sure how to resolve this issue.
Any ideas or insights into this would be awesome!

You can add a handler to watch for the modal close event, then push a new history with the hash removed:
$(".modal").on("hidden.bs.modal", function() { // any time a modal is hidden
var urlReplace = window.location.toString().split('#', 1)[0]
history.pushState(null, null, urlReplace); // push url without the hash as new history item
});

How do I ask for confirmation before changing tabs using Bootstrap 3 tabs?

I have the standard tabs setup using Bootstrap 3. Each tab is a form into which the user inputs information. Now there is a save button at the bottom of each form which will save the information in the current tab, but what I'm looking to do is enable the user to click a different tab at the top of the page, and be given a warning of
var areYouSure = confirm('If you sure you wish to leave this tab? Any data entered will NOT be saved. To save information, use the Save buttons.');
with an OK or Cancel button. If they click OK then they go to the tab they clicked, and if they hit cancel, they stay on the current tab. Anybody any idea how I can do this? I've been trying to get this all day, but with no luck. Should I even be using Bootstrap tabs or would it be easier to build my own tabs functionality instead of over-riding bootstrap's tabs?

Per the Bootstrap 3 docs, you can set up something like this. In your tab button listener, show a confirm box, then add logic to handle that response:
$('#myTabs a').click(function (e) {
e.preventDefault()
var areYouSure = confirm('If you sure you wish to leave this tab? Any data entered will NOT be saved. To save information, use the Save buttons.');
if (areYouSure === true) {
$(this).tab('show')
} else {
// do other stuff
return false;
}
})

You could add a class to your tabs and then use an on click function where you'd fire a modal or bootbox confirm asking the user if they want to continue to the new tab. If they select no, you prevent the new tab from loading, if they select yes, you continue.
https://api.jquery.com/click/
http://bootboxjs.com/examples.html

Foundation reveal-modal: how can I return to parent modal after closing modal-in-a-modal

Here is an example of modal in a modal.
http://foundation.zurb.com/docs/components/reveal.html
Is there any way to return to the first modal in the same state, after closing child one?
Or, even better, how can I get modal over modal, not replace first modal with second?
Update: OK, I can just open first modal again, state is the same.
$('#parent-dialog').foundation('reveal','open');
Is it possible to make modal-over-modal?

Is this what you're looking for?
You can create a reveal modal with another inside it. Setting
reveal.multiple_opened to true will not close previously opened reveal
modals. You can even put a video into a reveal.
Source: http://foundation.zurb.com/sites/docs/v/5.5.3/components/reveal.html

Change Bootstrap modal option once it already exists

I'm using Bootstrap Modal. I declare it, I call it, I show it...everything seems to be ok.
But what if I have an already existing modal previously shown with "keyboard" property to false and I want to change it on the go? I mean something like:
First, I create a Modal doing this (as you can see, I declare the modal putting keyboard property to false):
$('#myModal').modal({
show: false,
backdrop: true,
keyboard: false
});
But then I declare this event handler, that means that if "something" happens, I want the keyboard property to be set to true.
$('#myModal').on('shown', function(e) {
if (something){
$('#myModal').modal({keyboard: true});
}
}
So, when I go
$("#myModal").show();
The event handler is not doing what it is supposed to, as I am not getting to close the modal once Escape key is pressed. But I am completely sure that "something" is true and I have checked and re-checked that $('#myModal').modal({keyboard: true}) is executed.
Any clue as to why this isn't updating the value of configuration option?

To change configuration settings on already initiated Bootstrap plugin, such as the Modal, you need to access the plugin object attached to the element, like $('#pluginElement').data['somePlugin'] and then set the options in it.
For the Modal, you need:
$('#myModal').data('modal').options.keyboard = true;
JSFiddle Demo (old)
For Bootstrap 3 (as mentioned in comments by #Gerald ), you need bs.modal:
$('#myModal').data('bs.modal').options.keyboard = true;
Waiting Modal Example

A bit beyond the scope of the OP, but this is now twice I have searched for the same solution (my memory is crap) and twice that I came across this question which led me to my eventual answer. My issue was how to make an already init'ed and displayed modal, which was "closeable", into an "uncloseable" model. In the rare even that another user needs this answer, here is what I did based on the accepted answer:
*bootstrap3 used
$('#modal').off('keyup.dismiss.bs.modal'); // disable escape key
$('#modal').data('bs.modal').options.backdrop = 'static';
$('#modal button.close').hide();
Notice that I didn't change the options.keyboard property to false (followed by calling escape()) as suggested above. I could not get that to work, so after looking the Bootstrap source, I saw that all it was doing was simply removing an event listener for 'keyup.dismiss.bs.modal'.
To re-enabled things (in my scenario, when the model is hidden):
$('#modal').on('hidden.bs.modal', function (e) {
$(this).data('bs.modal').escape(); // reset keyboard
$(this).data('bs.modal').options.backdrop = true;
$('button.close', $(this)).show();
});
This seems COMPLETELY clumsy and will for sure break in coming versions of Bootstrap, but works for now...
Cheers :)

For bootstrap4
To disable closing modal on escape button:
$('#myModal').off('keydown.dismiss.bs.modal');
To disable closing modal on clicking on backdrop:
$('#myModal').data('bs.modal')._config.keyboard = false;
As warned by nocturnal, this may break in the future versions of bootstrap.

For Bootstrap 4.1
The options property should be replaced with _config.
E.G.
const modal = $('#modal');
/*
|------------------------------------------------------------------------------
| Now, let us assume you already opened the modal (via js or data attribute).
| If you want to access the options and modify.
|------------------------------------------------------------------------------
*/
// [Not Required] Let us see what the object is like.
console.log( modal.data('bs.modal')._config );
// Override the options to lock modal.
modal.data('bs.modal')._config.backdrop = 'static';
modal.data('bs.modal')._config.keyboard = false;
// [optional] You can also hide all data-dismiss buttons too.
modal.find("[data-dismiss='modal']").hide();
// Revert all actions above.
modal.data('bs.modal')._config.backdrop = true;
modal.data('bs.modal')._config.keyboard = true;
modal.find("[data-dismiss='modal']").show();

Setting backdrop and esckey not to close the modal when the modal is already open
$('div[name="modal"]').data('bs.modal').options.backdrop = 'static';
$('div[name="modal"]').off('keydown.dismiss.bs.modal');
Unset the backdrop and key esc purpose to not close the modal
$('div[name="user_profile_modal"]').data('bs.modal').options.backdrop = true;
$('div[name="user_profile_modal"]').data('bs.modal').escape();

You can also add an attribute in your HTML tag: data-keyboard="false"
<div id="myModal" class="modal hide fade" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
It works for me!

Another option if you do not know if the modal has already been opened or not yet and you need to configure the modal options (Bootstrap 3):
var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal
if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
$modal.modal({
keyboard: keyboard,
backdrop: backdrop
});
} else { // Modal has already been opened
$modal.data('bs.modal').options.keyboard = keyboard;
$modal.data('bs.modal').options.backdrop = backdrop;
if(keyboard === false) {
$modal.off('keydown.dismiss.bs.modal'); // Disable ESC
} else { //
$modal.data('bs.modal').escape(); // Resets ESC
}
}
Thanks #nokturnal

For me this method works the best
$('#modal').on('hide.bs.modal', function () {
return false;
});
It prevents modal from closing by any possible scenario:
pressing escape key
clicking outside the modal
clicking close button
and even using of $('#modal').modal('hide')