Develop Reference

Disable click outside of bootstrap modal area only for a few second [duplicate]

Can I change backdrop to 'static' while my modal is open?
I have modal with form submit button. When I click this button I show loading spinner on my modal and that is the moment when I want to change backdrop to static
I tried $('#myModal').modal({backdrop: 'static', keyboard: false}), but I can still close my modal by clicking the backdrop or using escape button.
Second step should be changing backdrop back to true, but I didn't try this yet, because first I need to set backdrop to static.
I could set backdrop to static on modal show, but I want to avoid this and change it after submit.
Any ideas?

Ok I solved this. Maybe it is not the best solution, but it is working for my special case.
I added $('#myModal').off('click'); just after I show loading spinner on submit. This prevents from closing modal with mouse click.
There was a problem with disabling escape button, because browsers stops page loading when user press this button. So I decided to hide the spinner to unlock the form with this code:
$(document).on('keydown',function(e) {
if (e.keyCode == 27) {
$('#myLoadingSpinner').hide();
}
});
Edit:
I found another solution for backdrop:
$('#myModal').data('bs.modal').options.backdrop = 'static';
I tried this also for keyboard = false, but it doesn't work.

I had a modal that could be opened 2 different ways. When the user opened it one way, I wanted them to be able to close the modal. When they opened it the other way I didn't want them to be able to close it.
I found this question and used the solution from the original poster. I also tried adding keyboard which now works:
$('#myModal').data('bs.modal').options.backdrop = 'static';
$('#myModal').data('bs.modal').options.keyboard = false;

I had a different JavaScript object returned and thus the following solution:
$myModal.data("bs.modal")._config.backdrop = value;

The simplest method I've come up with is attaching to the hide.bs.modal event and calling preventDefault(). This doesn't technically set the backdrop to static, but it achieves the same effect in a toggleable manner.
let $myModal = $('#myModal');
function preventHide(e) {
e.preventDefault();
}
// if you have buttons that are allowed to close the modal
$myModal.find('[data-dismiss="modal"]').click(() =>
$myModal.off('hide.bs.modal', preventHide));
function disableModalHide() {
$myModal.on('hide.bs.modal', preventHide);
}
function enableModalHide() {
$myModal.off('hide.bs.modal', preventHide);
}
(Disclaimer, I didn't test making buttons allowed to hide the modal, as that wasn't my scenario. If it doesn't work, just call .modal('hide') from the click() callback.)

You can disallow closing of a modal when clicking outside of it, as well as on esc button. For example, if your modal ID is signUp:
jQuery('#signUp').on('shown.bs.modal', function() {
jQuery(this).data('bs.modal').options.backdrop = 'static';
jQuery(this).data('bs.modal').options.keyboard = false;
});

I found, that in Bootstrap 5 this is slightly different:
modal = new bootstrap.Modal($('.modal'));
modal._config.backdrop = 'static'; // or true

hide toggle content, if a user didnt click inside a specific box

I have this code for toggling menus on my site. It will open a menu on click, close others open when you click another and close them all if you click outside.
The issue is, I'm now using this for my search bar to appear too, but if you click inside the search box it vanishes - woops. Would it be possible to amend the hiding code to detect if the user wasn't clicking inside a specific area of the code?
// navbar toggle menu
$(document).on('click', ".toggle-nav > a", function(event) {
event.preventDefault();
event.stopPropagation();
var $toggle = $(this).closest('.toggle-nav').children('.toggle-content');
if ($toggle.hasClass('toggle-active'))
{
$($toggle).removeClass('toggle-active');
}
else
{
$(".toggle-content").removeClass('toggle-active');
$($toggle).addClass('toggle-active');
}
});
// hide the toggle-nav if you click outside of it
$(document).on("click", function ()
{
$(".toggle-content").removeClass('toggle-active');
});

Instead of using click, this uses mouseup. If the target is, for example #search-bar, it won't remove toggle-active from toggle-content elements.
$(document).mouseup(function(e) {
if (!$(e.target).is('#search-bar')) {
$(".toggle-content").removeClass('toggle-active');
}
});
You can see it in action with this jsFiddle.
Hopefully this helps.

Modal close with transition effects on button click

I have a modal which is opened by clicking this hyperlink:
<a class="link-efekt" data-hover="izrazi zanimanje" href="#izrazi-zanimanje-univerzalno">izrazi zanimanje</a>
And closed by clicking this one:
zapri
I am trying to reprogram the ESC key to always go back to the main screen back to the main screen or to close modal window.
So my attempt at this was to reprogram ESC key to go to a previous hyperlink using window.history.back(); but then it can go back multiple times and I only want it to be able to go back once - just enough to close modal window. This is why i implemented the if statement which should check if #izrazi-zanimanje-univerzalno is opened. Otherwise ESC key shouldn't do anything.
I also tried using $('#izrazi-zanimanje-univerzalno').hide(); instead of window.history.back() (without if sentence) but it totally ignores my CSS transition effects and once modal is hidden it can't be respawned by clicking on a hyperlink that usually opens it.
<script type="text/javascript">
$(document).keyup(function(e) {
if (e.keyCode == 27) {
if ( $("#izrazi-zanimanje-univerzalno").data('modal').isShown ) {
window.history.back();
}
}
});
</script>
After implementing the first suggested solution by #crazymatt I get this console output on keypress:

Since you are using JQuery couldn't you run a fade animation then close the window? Something like this:
$( "#clickme" ).click(function() {
$( "#book" ).fadeTo( "slow" , 0, function() {
// Animation complete now close overlay
});
});
I made a JS.Fiddle with my example but I didn't take the time to apply this to an overlay.

Dismiss bootstrap modal on back press

I have a meteor app for both web and mobile platforms.
I have a bootstrap modal in it, and I need the modal to be dismissed whenever a user presses the browser's back button (in web app), or device's back button (in mobile app).
Currently, when I press (browser/device) back button, the modal disappears without any animation, the modal's faded backdrop is still displayed, and the user is taken to the previous page.
What I want is that when the modal is open, the modal (along with the backdrop) should dismiss, with animation, and the user should remain on the current page.
Here's my relevant code:
$(window).on('popstate', this.handleBackPress);
document.addEventListener("backbutton", this.handleBackPress, false);
...
handleBackPress(event) {
event.preventDefault();
event.stopPropagation();
$('.modal').modal('hide');
}
Thanks :)
Update
Using the following code in android dismisses the modal correctly, and stays on the same page. But now, it never ever allows the back press event to propagate.
document.addEventListener("backbutton", this.handleBackPress);
...
handleBackPress(event) {
$('.modal').modal('hide');
}

in your function, add $('.modal-backdrop').remove();
handleBackPress(event) {
event.preventDefault();
event.stopPropagation();
$('.modal').modal('hide');
$('.modal-backdrop').remove();
}
As for the fade effect, your modal should have a fade class attached to it: class="modal fade"

Try this :
$('#modalid').modal('toggle');
Your code will be like this:
handleBackPress(event) {
event.preventDefault();
event.stopPropagation();
$('.modal').modal('toggle');
}

Try this out :
$('#backbutton').click(function() {
$('.modal').modal('hide');
});

jQuery close menu auto closing

Building a mobile menu and would like when the user clicks on the document, not the menu to close the menu if its open.
Problem is that when the first click is fired to open the mobile it automatically closes. I'm struggling to get this bit to work.
The code recognises the click so the window is detecting the right action. I'm just missing one final step I think.
Code is:
$('.mobile-menu-button').click(function(e) {
e.preventDefault();
$('.mobile-menu').slideToggle('slow');
});
// close on off click
$(window).click(function(e){
e.preventDefault();
e.stopPropagation();
if($('.mobile-menu').css("display") == 'block') {
$('.mobile-menu').slideToggle();
console.log('click');
}
});
Thanks

You can use event delegation. When you click on '.mobile-menu', you open it or close it, when you click somewhere else you only close it.
$(window).on('click', function(e){
e.preventDefault();
if ($(e.target).hasClass('mobile-menu-button')) {
$('.mobile-menu').slideToggle('slow');
} else {
$('.mobile-menu').css('display') === 'block' && $('.mobile-menu').slideUp();
}
});
a basic example on this fiddle: https://jsfiddle.net/6e7atrmn/2/