$("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>我在使用 bootstrap-4 模态时有双滚动条。我已经尝试了所有可能的解决方案(使用 jQuery 和 css)，但我无法获得我想要的结果。
如您所见，有两个滚动条。即使我在模式关闭时将正文溢出设置为自动，并在模式打开时 overflow hidden ，也会出现一个滚动条，但它会移动到右侧的正文内容。由于我使用的是多引导模式，在触发多引导模式后，body 上的 modal-open 类消失了。
最佳答案
这就是我解决这个问题的方法...当我打开/关闭模式时，我正在使用这个 javascript 添加和删除 html 上的 modal-open .
jQuery('.modal').on('shown.bs.modal', function (e) {
jQuery("html").addClass("modal-open");
});
jQuery('.modal').on('hide.bs.modal', function (e) {
jQuery("html").removeClass("modal-open");
});
对我来说，html 需要是 modal-open ，它提供了 overflow: hidden;
隐藏滚动条的样式。
关于jquery - bootstrap-4 模态中的双滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53029050/