【发布时间】：2019-04-01 09:56:03
【问题描述】：
$("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），但我无法达到我想要的结果。
如您所见，有两个滚动条。即使我在模式关闭时将正文溢出设置为自动，并且在模式打开时将溢出隐藏，也会出现一个滚动条，但它会向右移动到正文内容。由于我使用的是多个引导模态，在触发多个引导模态后，body上的modal-open类消失了。
【问题讨论】：
-
这可能会有所帮助。 stackoverflow.com/questions/16369718/…
-
感谢您的建议，但这不是我想要达到的结果 :)
标签： jquery html css bootstrap-4