Develop Reference

How to use modal box from different view page to work inside on click function

$(".event_over_time").click(function()
{
//i want the modal box to be opening up on this click function here
});
the modal box opens up on click in a different page in my site i want the same modal box to open up for the click function on a different page in my website basically a shortcut to the view modal box through the click function

First you have to make sure your modal HTML code is in the footer so that it's loaded on all pages of your website. Next you have to give the modal an id so that we can use that in the click function (I used #modal in the example).
Since you're using jQuery you can use the function .fadeIn to transition the modal from display: none; to display: block;
The function will look something like this:
$('.event_over_time').on('click', function(e) {
// Prevent default is used so you can also give the ID to a anchor tag without it executing the href
e.preventDefault();
// Here we use the jQuery .fadeIn function to show the modal.
$('#modal').fadeIn(200);
});
if you want to make a function to close the modal you can do something like the code below and make sure there is a close button in the modal with the ID of #closeModal.
$('#closeModal').on('click', function(e) {
// Prevent default is used so you can also give the ID to a anchor tag without it executing the href
e.preventDefault();
// Here we use the jQuery .fadeOut function to hide the modal again.
$('#modal').fadeOut(200);
});

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

Toggle Bootstrap dropdown by click on the link in modal

When a form submitted the modal box appears. This box contains a text with a link. Click on this link should close this box and toggle dropdown (auth form). The problem is that I can't handle toggling the dropdown by clicking this link.
Here is the code of click-handler of this link
$(function() {
$('#open_auth_form').click(function(e) {
e.preventDefault();
$('#participate_modal').modal('hide');
$('#auth_link').dropdown('toggle');
});
});
Why doesn't it work? I tried also to move dropdown toggling inside the 'hide.bs.modal', tried .trigger('click'). Nothing helped. But simple running
$('#auth_link').dropdown('toggle');
from console works well.

Check out this stack overflow question on How to open Bootstrap dropdown programmatically. There are a number of solutions you can try such as:
Triggering the click.bs.dropdown event:
$('#dropdown').trigger('click.bs.dropdown');
Or manually adding/removing the classes:
$('.dropdown').addClass('open'); // Opens the dropdown
$('.dropdown').removeClass('open'); // Closes it

In my case it was enough to add
e.stopPropagation();

Call function on click unless click occurs on certain elements

When the user clicks on a modal, I'd like the modal to hide. I'm accomplishing this by using this code:
$(".modal").click(function(event){
$('#myModal').modal('hide');
});
However, .modal contains an img and p, and when the user clicks on these elements I don't want the modal to hide. What would be the best way to achieve this?
Thanks.

Use $(event.target).is('.modal') to check if the clicked element is a modal.
$(".modal").on('click', function (event) {
if ($(event.target).is('.modal')) {
$('#myModal').modal('hide');
}
});
Example Here

Exit dynamic popup by clicking outside of it?

I have a popup where i basically just dim the body giving it the lights out effect. I have a click handeler where if the body is clicked it will close the popup but my issue is the click handler stops all clicks even before the popup is opened. Does anyone know how i could do this so that clicking on a link before the popup is opened would go to the link but clicking one after the popup was opened would do my function and not click the link?
Heres what i use right now:
$(document).ready(function() {
$("body").click(function(){
var element=document.getElementById("game");
//yes i could use the jquery method for all of these but this works
element.width="650";
element.height="500";
element.style.position="relative";
$("body").fadeTo(3000,1.0);
}
return false;
})
});

You can actually add your "body" click handeler only after clicking your link/opening the popup. Then after clicking the "body" you may remove it again and restore the click handler for your link. "bind()" and "unbind()" will be handy.
K

Where's the jQuery? When you use jQuery, you use jQuery...
When you click on the body, you can check whether #game is visible or not and work with that:
$(document).ready(function() {
$('body').click(function(e){
if (!$('#game').is(':visible')) {
$('#game').width('650px');
$('#game').height('500px');
$('#game').css('position', 'relative');
$('body').fadeTo(3000, 1.0);
e.preventDefault();
return false;
}
});
});