bootstrap-4模式中的双滚动条

Question

​

$("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">&times;</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">&times;</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">&times;</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 overflow设置为auto，在打开模式时将overflow设置为隐藏，也会出现一个滚动条，但它会移动到body内容的右侧。由于我使用的是多个引导模式，因此在触发多个引导模式之后，body上的body open类就消失了。

Answer 1

这里的问题似乎是“模式-打开”类，当你打开下一个模式时，它并不总是添加到body中(我认为这是由同时触发的隐藏()和显示()操作引起的)。

正是这个类将滚动条移到了您身体上：

.modal-open {
    overflow: hidden;
}

也许我找到了一个不用接触你的函数的解决方案。我的解决方案是对计算机说：“嗨，机器！每当页面中有一个模式显示时，在<body>中放置一个类modal-open”。

为此，我使用了模态事件，您可以在此处找到文档：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">&times;</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">&times;</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">&times;</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个

也许我找到了一个好的解决方案！为此，我清理了您的代码，这样您就可以更好地了解发生了什么。我为我编写的每个函数添加了注释。请注意，为了简单起见，我还在next和prev按钮中添加了"data-dismiss“属性。我删除了你的循环，因为这里没有必要，我只创建了一个onClick事件，我在Windows上测试了火狐，Chrome和IE11，都工作得很好。

尝试一下，如果你有什么不明白的地方，请在评论中告诉我。:)

​

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">&times;</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">&times;</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">&times;</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>

​

Answer 2

这就是我解决这个问题的方法。当我打开/关闭模式时，我使用这个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需要是模式打开的，也就是提供了隐藏滚动条的overflow: hidden;样式。

Answer 3

你有没有试过在你的CSS文件中应用这个？

html {
  overflow(x, y): hidden;
}