I have a page with a modal with a lot of info so you need to scroll. This modal contains a link to a second modal.
When I
modal 1 looses scrolling (there is still a scroll bar but it doesn't do anything). Instead the modal stays in the position it was at the time of opening modal 2.
I played around with closing the background modal with js first (but that messes up scrolling on the second modal). It appears that every time I try to open/close more than one modal I always get some issue with the scrolling.
Any suggestions on how to handle this?
Add
.modal { overflow: auto !important; }
To your CCS
.
Without your code I went ahead and created this jsFiddle that recreates your issue, or at least a very similar one. Add your code and I will test if this works or not.
Adding that line to the CSS fixed the issue as demonstrated with this jsFiddle .
Solution taken from this thread on github which offers other solutions as well.
The solution that worked for me was:
$('.modal').on("hidden.bs.modal", function (e) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});
$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});
this is the solution:
<script>
$('#id_ofyou_secondary_modal').on('hidden.bs.modal', function (e) {
$('body').addClass('modal-open');
});
</script>
take care that "#idofyousecondarymodal" is the id of the secondary or tertiary or infinite modal. but NEVER write the ID of the first modal.
example i have 2 modal:
<div id="mymodal1" class="modal fade in" style="display:none;">
.
.
.
.
</div>
<div id="mymodal2" class="modal fade in" style="display:none;">
.
.
.
.
</div>
then the script will be:
<script>
$('#mymodal2').on('hidden.bs.modal', function (e) {
$('body').addClass('modal-open');
});
</script>
jus add this code and work fine.
Add following to your CSS :
.modal
{
overflow: scroll !important;
}
I tried the previous solutions, and not working for my use case:
This is the working one for me:
var bootstrapModalCounter = 0; //counter is better then using visible selector $(document).ready(function () { $('.modal').on("hidden.bs.modal", function (e) { --bootstrapModalCounter; if (bootstrapModalCounter > 0) { //don't need to recalculate backdrop z-index; already handled by css //$('.modal-backdrop').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) - 10); $('body').addClass('modal-open'); } }).on("show.bs.modal", function (e) { ++bootstrapModalCounter; //don't need to recalculate backdrop z-index; already handled by css }); });
.modal { /*simple fix for multiple bootstrap modal backdrop issue: don't need to recalculate backdrop z-index; https://stackoverflow.com/questions/19305821/multiple-modals-overlay/21816777 */ background: rgba(0, 0, 0, 0.5); }
This is modified fiddle from @Keeleon for the fix https://jsfiddle.net/4m68uys7/
This is github issue https://github.com/nakupanda/bootstrap3-dialog/issues/70
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.