删除引导模式中的滚动条答案

【问题标题】：remove scroll bar in bootstrap modal删除引导模式中的滚动条
【发布时间】：2013-09-14 05:27:54
【问题描述】：

<span class="education"style="font-size:170%;line-height:150%;">&nbsp;Education
<br>
          <small style=" color:gray;font-size:60%;">&nbsp;
        Indian Institute of Managment,2009-2011
      </small>
<br>

      <small style=" color:gray;font-size:60%;">&nbsp;Indian Institute of   
        Technology,2004-2008
      </small>
<br>
    <a data-toggle="modal" href="#education" style="float:right;font-size:60%;">
     <small> Edit&nbsp;
     </small>
       </a>
       <div class="modal fade " id="education">
     <div class="modal-dialog ">
       <div class="modal-content light">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
           </button>
           <h4 class="modal-title">Education
           </h4>
         </div>
         <div class="modal-body">
           <form>
             <fieldset>
                   <label  for="post-graduation">post-graduation:
           </label>
               <input type="text" name="post-graduation" id="inputbox" 
            class="text ui-widget-content ui-corner-all" />
           <label  for="graduation">graduation:
           </label>
               <input type="text" name="graduation" id="inputbox" 
            class="text ui-widget-content ui-corner-all" />

            </fieldset>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->          
     </span>

这是我的代码。当我点击编辑按钮时，我想要一个模式。模式出现在我的页面中，当我单击关闭按钮时消失。但是使用模态它也显示滚动条。如何从我的代码中删除滚动条？

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

在 bootstrap 3 中，CSS 将第二个栏放在那里（模态类）。你可以改变它：

.modal {
    overflow-y: auto;
}

【讨论】：

【解决方案2】：

您应该从引导类中隐藏滚动，然后删除 body 的 margin-right。

这里是css 代码：

#modalElementId
{
  overflow: hidden;
}

在show.bs.modal 事件中：

$('#modalElementId').on('show.bs.modal', function () {
  $('body').css("margin-right", "0px");
});

【讨论】：

【解决方案3】：

     .modal-open{
       margin-right:0px !important;
     }

【讨论】：

【解决方案4】：

你可以设置模态体的高度

 .modal-body {
        max-height: 600px;
    }

【讨论】：

这可能对你有帮助...stackoverflow.com/questions/7508576/…

【解决方案5】：

您需要删除body中的classmodal-open，检查：

$('#modalElementId').on('hidden.bs.modal', function (e) {
    $('body').removeClass('modal-open');
});

【讨论】：

【解决方案6】：

在我的情况下，我想全屏显示图像，因此我必须删除模态填充（将其显示在滚动条上）并添加一些 CSS。示例：

<!-- Image Modal -->
<div class="modal fade p-0" id="zoomImageModal" tabindex="-1" role="dialog" aria-labelledby="zoomImageModal"
  aria-hidden="true">
  <div class="modal-dialog  modal-full" role="img">
    <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="m-auto">
        <img class="img-fluid" src="{{zoomPathImage}}" alt="zoomPathImage" [title]="zoomPathImage">
      </div>
    </div>
  </div>
</div>

风格：

.modal-full {
    min-width: 100%;
    margin: 0;
}

.modal-full .modal-content {
    min-height: 100vh;
}

注意：我使用的是 Bootstrap4

【讨论】：