jQuery 删除引导模式中的滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18798639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
remove scroll bar in bootstrap modal
提问by sonal
<span class="education"style="font-size:170%;line-height:150%;"> Education
<br>
<small style=" color:gray;font-size:60%;">
Indian Institute of Managment,2009-2011
</small>
<br>
<small style=" color:gray;font-size:60%;"> Indian Institute of
Technology,2004-2008
</small>
<br>
<a data-toggle="modal" href="#education" style="float:right;font-size:60%;">
<small> Edit
</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">×
</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>
It is my code. I want a modal when I click on edit button. The modal was appear in my page and disappear when I click on close button. But with modal it also show scroll bar. How can I remove scrollbar from my code?
这是我的代码。当我点击编辑按钮时，我想要一个模态。模态出现在我的页面中，当我点击关闭按钮时消失。但是使用模态它也显示滚动条。如何从我的代码中删除滚动条？
回答by veritascs
In bootstrap 3 the CSS puts the second bar in there (modal class). You can change it like:
在引导程序 3 中，CSS 将第二个栏放在那里（模态类）。你可以像这样改变它：
.modal {
overflow-y: auto;
}
回答by Ezequiel Leiva
You should hide the scroll from the bootstrap class and then remove the margin-rightof the body.
你应该隐藏引导类滚动，然后删除margin-right的body。
Here the csscode:
这里的css代码：
#modalElementId
{
overflow: hidden;
}
and in the show.bs.modalevent:
在这种情况show.bs.modal下：
$('#modalElementId').on('show.bs.modal', function () {
$('body').css("margin-right", "0px");
});
回答by Damathryx
.modal-open{
margin-right:0px !important;
}
回答by fitorec
Your need remove the classmodal-openin the body, check:
您需要删除classmodal-open中的body，检查：
$('#modalElementId').on('hidden.bs.modal', function (e) {
$('body').removeClass('modal-open');
});
回答by Rzv Razvan
In my case I want to display an image on full screen so to achieve this I have to remove the modal padding(to display it over the scrollbar) and also adding some CSS. Example:
在我的情况下，我想在全屏上显示图像，因此为了实现这一点，我必须删除模态填充（以将其显示在滚动条上）并添加一些 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">×</span>
</button>
<div class="m-auto">
<img class="img-fluid" src="{{zoomPathImage}}" alt="zoomPathImage" [title]="zoomPathImage">
</div>
</div>
</div>
</div>
Style:
风格：
.modal-full {
min-width: 100%;
margin: 0;
}
.modal-full .modal-content {
min-height: 100vh;
}
Note: I am using Bootstrap4
注意：我正在使用 Bootstrap4
回答by Rzv Razvan
you can set height for modal body
您可以为模态体设置高度
.modal-body {
max-height: 600px;
}
