$("div[id^='entry']").each(function(){
var currentModal = $(this);
//click next
currentModal.find('.btn-next').click(function(){
currentModal.modal('hide');
currentModal.closest("div[id^='entry']").nextAll("div[id^='entry']").first().modal('show');
});
//click prev
currentModal.find('.btn-prev').click(function(){
currentModal.modal('hide');
currentModal.closest("div[id^='entry']").prevAll("div[id^='entry']").first().modal('show');
});
}); body.animsition.modal-open,body.animsition{
padding-right: 0!important;
overflow: hidden!important;
}
.modal.fade.show {
overflow-x: hidden;
overflow-y: auto;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#data1">
View
</button>
<p>If you don't want to download and host Bootstrap 4 yourself, you can include it from a CDN (Content Delivery Network).
MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery:If you don't want to download and host Bootstrap 4 yourself, you can include it from a CDN (Content Delivery Network).
Max...
I'm experiencing an issue with double scrolling while using the Bootstrap 4 modal. I've attempted various solutions using jQuery and CSS, but have not been able to achieve the desired outcome.
https://i.sstatic.net/yVw1w.png
There are two scrollbars present in the situation. Even after adjusting the body's overflow to auto when the modal is closed and hiding the overflow when the modal is open, one scrollbar appears and shifts the body content to the side. When multiple Bootstrap modals are triggered, the modal-open class on the body disappears.