Похоже, проблема здесь в том, что класс «открытый модально» не всегда добавляется к body, когда вы открываете свой следующий модал (я думаю, это вызвано тем, что ваше действие hide () и show () вызвано тем жевремя).
Это тот класс, который удаляет полосу прокрутки для вашего тела:
.modal-open {
overflow: hidden;
}
Может быть, я нашел решение, не касаясь ваших функций.Мое решение говорит компьютеру: « Эхи, машина! Каждый раз, когда на странице появляется модальное шоу, помещай класс modal-open в <body>».
Для этого я использовалмодальные события, вы можете найти документацию здесь: https://getbootstrap.com/docs/4.0/components/modal/
Я добавил только это в ваш скрипт, CSS не нужен:
$('.modal').on('shown.bs.modal', function (e) {
$("body").addClass("modal-open");
});
$("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');
});
});
$('.modal').on('shown.bs.modal', function (e) {
$("body").addClass("modal-open");
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></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 modal-1" 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>
РЕДАКТИРОВАТЬ 1
Возможно, я нашел хорошее решение!Для этого я немного очистил ваш код, чтобы вы могли лучше понять, что происходит.Я добавил комментарии к каждой функции, которую я написал.Будьте осторожны, для простоты я добавляю атрибут «data-dismiss» также к кнопкам next & prev.Я удалил ваш цикл, потому что он здесь не нужен, и я создал только одно событие onClick.Я тестировал Firefox, Chrome и IE11 в Windows, и все они работают хорошо.
Попробуйте, и если есть что-то, чего вы не понимаете, дайте мне знать в комментариях.:)
var padding_right,
currentModal,
my_block;
$(document).on('shown.bs.modal', '.modal', function () {
padding_right=$("body").css("padding-right"); /* create a variable with padding-right when modal is shown */
});
$(document).on('hidden.bs.modal', '.modal', function () {
/* This function is triggered when a modal is hidden and... */
if($('.modal:visible').length)
$(document.body).addClass('modal-open').css("padding-right", padding_right); /* ...if there are some modal visible, it put on body class "model-open" & padding-right */
else
$(document.body).removeAttr("style"); /* ...if not remove only style attribute: having put "data-dismiss="modal on button next and prev modal.js automaticaly remove "modal-open" */
});
/* here I created only one function for our buttons, where I change only "my_block" with previus or next one. Your loop is not necessary */
$(".btn-next, .btn-prev").on("click", function(e){
currentModal = $(this).closest(".modal");
my_block= ($(this).hasClass("btn-next")) ? currentModal.nextAll("div[id^='entry']").first() : currentModal.prevAll("div[id^='entry']").first();
my_block.modal('show');
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></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 modal-1" 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" data-dismiss="modal">Prev</button> <!-- add data-dismiss here to close automatically modals -->
<button type="button" class="btn btn-default btn-next" data-dismiss="modal">Next</button> <!-- add data-dismiss here to close automatically modals -->
<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" data-dismiss="modal">Prev</button> <!-- add data-dismiss here to close automatically modals -->
<button type="button" class="btn btn-default btn-next" data-dismiss="modal">Next</button> <!-- add data-dismiss here to close automatically modals -->
<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>