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');
Related
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')
Actually I got the popup modal fancy box problem where the popup is not loaded the content properly. The modal div is by default to display none. And I need to show that modal on click event.
I am using the module for AfterPAy payment method where this feature is included. When We click on the learn more button then the popup is open but not the content in that fancy box. I need to make it perfect. This my website URl https://www.tradie.com/tradie-honey-badger-sports-mid-length-trunk-1371.html
(function($) {
$(document).on('ready', function() {
$('.afterpay-what-is-modal-trigger').fancybox({
afterLoad: function() {
$('#afterpay-what-is-modal').css("display", "block");
}
afterShow: function() {
$('#afterpay-what-is-modal').find('.close-afterpay-button').on('click', function(event) {
event.preventDefault();
$.fancybox.close();
})
}
})
});
})(jQuery);
The above js code is in the file of extension modal.js. Here the aftershow function is working, but afterload is not working. Please how that modal will open properly with content.
Thanks.
As per the concern there is a div that is inline set to display none. So when you will hit the link/button then the modal will blanks due to that inline css.
Please find the html of the modal file and add an extra div at the top of that code and set display none to that div inline.
e.g.,
<div style="display:none;">
<div id="afterpay-what-is-modal">
<!--some modal code for popup-->
</div>
</div>
Add a div before the and style it to display none inline that it.
Hope this will work for you.
I have a list of data in a table and a button next to each row. When I click the buton, the modal loads up a relevant remote URL into the modal.
My submit button in said modal has the following jQuery attatched:
$('#editTrackModal').modal('hide');
When the modal hides, and I load up another remote URL into the modal, the modal appears, but on slower internet connections, the original content of the modal stays there for sometimes 4-5 seconds before being replaced.
Essentially, rather than hiding, I want to 'hide and destroy' the modal, and then re-create it.
Is this possible?
Simply destroying the modal after pressing the button closes the window, but then does not allow a subsequent modal to re-open until the page has reloaded.
You could clean the content of the modal, before show, I dont know how you load the content, you could use something like this:
$("#editTrackModal .modal-body").empty();
Hi you can do like this
// the modal is distroyed on hide event..
$('#editTrackModal').on('hidden', function(){
$(this).data('modal', null); //this will destroy you data and model means it will reset.
});
and it may be duplicate of how to destroy bootstrap modal window completely?
you can refer to that link also.
A good way to ensure that the modal's content is clean after hiding/closing it is can be done like this:
$('#editTrackModal').on('hidden.bs.modal', function () {
$('#editTrackModal div').remove(); //When the hidden event is triggered, remove all the contents of the modal.
});
And when you want to show the modal again, you can do something like this:
$('#editTrackModal').append($('.modal-contents')); //create first the contents of the modal, then attach it.
$('#editTrackModal').modal('show');
Your html may look like this:
<div id="editTrackModal" class="modal fade">
<div class='modal-contents'>
......Build your modal contents here......
</div>
</div>
I am using angular JS.
I have an an issue with a timeout modal. If on the gui, any modal already opened and time out modal comes up due to session inactive, the timeout modal hides behind the already opened modal. Need help here on how to get the timeout modal on the top of all the modals
I assume, based on what you're saying,
the timeout modal hides behind the already opened modal
this is a CSS issue. You can increase the z-index value of the modal element of your timeout modal. Here's a sample css rule in applying z-index.
#timeout-modal.modal-popup {
z-index: 999;
}
for inline:
<div style="z-index:999;">[MODAL CONTENT]</div>
You can create a customizable modal pop-up directive in angular if you want you can have your modal element styled like this the angular way.
<div ng-style="timeoutZIndex">...</div>
In your scope you can have it like this:
$scope.timeoutZIndex = {
'z-index': 999
}
Let me know if there's a need to clarify things more.
I have the following page:
http://www.poker-labs.com/571010001-1050-Super-Tuesday-300K-Gtd.html
As you can see, for some reason the modal is launched initially although I have defined show: false, also, the 'x' button should be working but it's not.
I feel like I'm missing something pretty basic
Have you added
$(".modal").modal("hide");
To your page?
Also, add:
<div class="modal hide fade">
To your div tag where you declare the modal