Develop Reference

Closing Modal box in Javascript

I am trying out Modal boxes in my project and I came upon a problem, that I am unable to close the modal box when a click is made outside of the Modal box. I tried the following code, but this closes the modal box at the same instant it is opened. I tried using setTimeout method too. Its not working. Could anyone help me out with this?
const gstModal=()=>{
g=document.getElementsByClassName("modal-gst")[0];
g.style.display="block";
document.addEventListener('click', function(event) {
var isClickInside = g.contains(event.target);
if (!isClickInside) {
closeGST();
}
});
}
function closeGST(){
document.getElementsByClassName("modal-gst")[0].style.display="none";
}

If you have an overlay div along with the popup then you can handle the click easily on the overlay div click.
Here is a sample modal popup by using HTML & JS
https://www.w3schools.com/howto/howto_css_modals.asp

jQuery popup close button dont work

I have a problem with the jQuery dialog popup.
Here's the code:
CLICK TO OPEN
<div id="popup_open" style="display:none">
<div class="dialog">
POPUP CONTENT
<div class="popup_close">×</div>
</div>
</div>
and the js:
$('a.popup').popup();
I wrote a simple closing script, but it only works one time.
$(document).ready(function () {
$('.popup_close').click(function () {
$('.popup_back').css('opacity', '0');
$('.popup_cont').css('opacity', '0');
});
});
How do I make the popup close every time?

One solution (though maybe not the best) is to add that click event on the close button in the function that opens the popup. If you go into developer tools and manually add the click event to the close button after the modal is open, it works every time.
Something like this could work:
$(".popup").click(function() { // Put the correct selector here, this is just a guess
// Opens the popup
$('a.popup').popup();
// Binds the click function
$('.popup_close').click(function () {
$('.popup_back').css('opacity', '0');
$('.popup_cont').css('opacity', '0');
});
});
There may be a cleaner solution but this is quick and dirty.

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();

How to always display Bootstrap 3 modal?

Bootstrap 3 modals are hidden by default. To launch them I have to click a trigger button:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
JSFiddle
I have tried the following but it has no effect:
jQuery(window).load(function(){
jQuery('#myModal').modal('show');
});
How can I ensure my modal is always displayed on screen? i.e. I don't want the user to have to manually display it by clicking on the trigger button. I don't want them to be able to close it either. I'd like it to remain open at all times.

Everything you asked is perfectly described in the docs.
Displayed on screen
Shows the modal when initialized.
$("#my-modal").modal({ show : true });
I don't want them to be able to close it either
Closes the modal when escape key is pressed
And
Includes a modal-backdrop element. Alternatively, specify static for a
backdrop which doesn't close the modal on click.
$("#my-modal").modal({
backdrop : "static",
keyboard: false
});

Here is the updated fiddle where users can't close the model but you need to remove the html elements for close buttons cuz thats very evil for your users :P
jQuery(window).load(function(){
jQuery('#myModal').modal('show').on('hide.bs.modal', function(e){
e.preventDefault();
});
});
http://jsfiddle.net/95Vf7/2/

Close any Bootstrap 3 popover with click on any buttons therein?

I have an app that will have several popovers that uses the html of a hidden DIV. This content may contain a button or buttons that will possibly do something in the app and close the popover, or just close the popover ("Cancel"). Like this:
What I'm looking for is a generic, extensible solution that I can apply to the button(s) to simply close the popover that contains them.
I don't want to wire this with anything specific to a particular button and/or popover.
I tried this and it does not work:
<button class="btn btn-link btn-xs" data-toggle="popover">Cancel</button>

Here you go this also works for tablet to tap outside the popover to hide it.
//HIDES POPOVER ON TABLET WHEN CLICK OUTSIDE
$('html').on('mouseup', function(e) {
if(!$(e.target).closest('.popover').length) {
$('.popover').each(function(){
$(this.previousSibling).popover('hide');
});
}
});