$("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).
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).
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).
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).
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).
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).
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).
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).
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).
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).
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).
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).
MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery:</p>
<div class="modal fade" id="data1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title title" id="exampleModalLabel">Trade Details</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="card-body card-block">
<div class="displaydata">
<table class="table table-bordered">
<tbody>
<tr>
<th scope="col">S.N</th>
<th scope="row">1</th>
</tr>
<tr>
<th scope="col">Company</th>
<th scope="row">Mark Company</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary approve" data-dismiss="modal" data-toggle="modal" data-target="#entry02">Approve
</button>
<input type="submit" class="btn btn-primary" value="Edit">
</div>
</div>
</div>
</div>
<div class="modal fade" id="entry02" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title title" id="exampleModalLabel">Pre-Payments/LC's Report Detail</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="card-body card-block">
<div class="displaydata">
<table class="table table-bordered">
<tbody>
<tr>
<th scope="col">Due Date</th>
<th scope="row">21st August</th>
</tr>
<tr>
<th scope="col">As per PI Cash/TT/Advance </th>
<th scope="row">210</th>
</tr>
<tr>
<th scope="col">Incoming/Outgoing LC Number/ Value</th>
<th scope="row">20</th>
</tr>
<tr>
<th scope="col">Company</th>
<th scope="row">Mark Company</th>
</tr> <tr>
<th scope="col">Company</th>
<th scope="row">Mark Company</th>
</tr> <tr>
<th scope="col">Company</th>
<th scope="row">Mark Company</th>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-prev">Prev</button>
<button type="button" class="btn btn-default btn-next">Next</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="Edit">
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="entry03" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title title" id="exampleModalLabel">Sales and Purchase Report Detail</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="card-body card-block">
<div class="displaydata">
<table class="table table-bordered">
<tbody>
<tr>
<th scope="col">Purchase/Sales Invoice Date</th>
<th scope="row">1st October</th>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-prev">Prev</button>
<button type="button" class="btn btn-default btn-next">Next</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="Edit">
</div>
</div>
</div>
</div>
</div>I'm having double scrollbar while using bootstrap-4 modal. I've tried all the possible solutions (using jQuery and css)but I'm not able to achieve the result I want.
As you can see, there are two scrollbars. Even if I set the body overflow to auto when the modal is closed, and overflow hidden when the modal is open, one scroll bar appears but it shifts to the body content to the right. Since I'm using multiple bootstrap modals, after the multiple bootstrap modal is triggered,the modal-open class on body vanishes.