How do I close bootstap modal programmatically? I checked so many answers about it, but none of them work... All below methods close modal, but keeps backdrop of it so I tried to remove backdrop with $('.modal-backdrop').remove(); it breaks modal and if I show it after removing backdrop scroll doesn't work on modal. I need to close it through js and whenever I want to by calling method. I know I can use data-dismiss="modal" to close it.
how I'm hiding modal:
$('#mymodal').modal("toggle");
$('#mymodal').modal("hide");
$('.close').click();
Update
So I see that for a lot of people it works with $('#mymodal').modal("hide"); but when I Inspect page I can see that there is two modal-backdrops in the body and after I call hide it closes modal and first modal-backdrop, but second one stays and this is why it's not working.
with modal open:
After closing modal with $('#mymodal').modal("hide");
This should work. if not you have other problem in code. Read modal javascript docs https://getbootstrap.com/docs/4.0/components/modal/#via-javascript
$('#myModal').modal('hide')
Related
I'm using wordpress with visual composer and I have built this demo popup example https://www.air8cushion.com/index.php/popup-test/ when I click on "More Info" button the popup shows up. However when I scroll content inside of it, and close the modal window, and again click on "More Info" I need to reset the content to appear from the top again.
I know its possible to do it with JS but I had fails many times to make it work. Most of examples of similar things online are mostly for Bootstrap and none of them worked for me.
Thanks.
You can use this on click of the close button of your popup
this function will scroll viewport of the popup div to top when clicked
jQuery(document).on('click','.vc_general',function(){
var myDiv = document.getElementById('myNav');
myDiv.scrollTop = 0;
});
".vc_general" is one of the class in your close button. You can add an extra class if you think it will affect the other functionality.
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
Alright, so I've got this js code:
jQuery(".toggle-panel").click(function() {
jQuery('#collapsible-element').collapse({
toggle: true,
});
});
I assume it should open and close #collapsible-element but it can only close it. This #collapsible-element has also classes "collapse in" attached by myself in code. With first click on .toggle-panel it closes the #collapsible-element, but the second click does not open it again. Am I missing something?
You don't need any additional JavaScript code for toggle if you are using bootstrap. check out the following:
http://getbootstrap.com/javascript/#collapse
I'm using Bootstrap 2.3.2, and I'm using modal dialogs like this:
<div id="notice1" class="modal hide fade">
<div class="modal-body">
<h4>This is a dialog for user...</h4>
</div>
...
</div>
and
var notice1 = $("#notice1");
notice1.modal({
keyboard: false,
backdrop: "static",
show: false
});
// Show the dialog
notice1.modal("show");
// Close the dialog
notice1.modal("hide");
Most of the the time, the above works fine and the modal dialog are opened and closed programmatically. However, in some rare cases, calling .modal("hide") does not close the dialog at all though the dark backdrop is removed.
This is a huge potential issue because the dialog may get stuck on the screen and block part of the content.
Is there a reliable way to ensure the dialog is always closed after calling .modal("hide")? Or better yet, how do we ensure a consistent hide behavior from Bootstrap? I don't want to remove the dialog completely from the DOM, because the same dialog may be re-used on the page.
You can hide the modal by using the following code.
$("#notice1").hide();
$(".modal-backdrop").hide();
According to documentation: http://getbootstrap.com/2.3.2/javascript.html#modals
You can catch the hidden event and force the display:none property.
notice1.on('hidden', function () {
$(this).css("display", "none")
})
I am using 1.9.x, below code working..
$("#yourModalWindow").modal('hide');
I'm having problems getting the SimpleModal jQuery plugin to close when the body is clicked. So far, only the 'X' button works to close it with:
$('a.modalCloseImg').hide();
Here is my code for launching the modalbox. Note that #login-link is the link that opens the box and #login-form is the hidden modal box.
// launch modal box
$("#login-link").click(function(){
$("#login-form").modal();
});
I've tried adding
$("#login-form").modal(overlayClose:true);
but it doesn't seem to be working. (FYI that parameter is per the documentation of the SimpleModal box as seen here.
Try launching the modal box with an additional parameter, like this:
// launch modal box
$("#login-link").click(function(){
$("#login-form").modal({ overlayClose: true });
});
you forgot additional {}.