[英]Remove Scroll Bar when Modal Appears
I know this has been asked but has not been 100% and been used effectively. 我知道有人问过这个问题,但尚未100%有效地使用它。
I have a modal on my page. 我的页面上有一个模式。 That looks like this:
看起来像这样:
https://www.dropbox.com/s/ha4smz4mlgm1z18/Capture.PNG https://www.dropbox.com/s/ha4smz4mlgm1z18/Capture.PNG
I am wanting to remove the scroll bar when the modal appears. 我想在出现模态时删除滚动条 。 How can this be done with CSS/JS?
如何使用CSS / JS完成? Or can it not be done at all?
还是根本无法做到? I do not want to change the height of the modal like other examples posted here.
我不想像这里发布的其他示例一样更改模式的高度。
Please note: I do not want to remove the Scroll Bar 100% Only when a Modal appears due to the jumpiness of the page. 请注意:由于页面的跳跃性,我不想仅在出现模态时将滚动条100%移除。 I am using Bootstrap 3.0, (Standard Bootstrap skin, Though I may change it later on)
我正在使用Bootstrap 3.0,(标准Bootstrap皮肤,尽管稍后可能会更改)
Extra Information: 额外的信息:
<!-- Contact Modal -->
<div aria-hidden='true' class='modal fade' id='contactModal' role='dialog' tabindex='-1'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button aria-hidden='true' class='close' data-dismiss='modal' type='button'>×</button>
<h4 class='modal-title'>Contact Us Form</h4>
</div>
<div class='modal-body'>
<form action='#' role='form'>
<div class='form-group'>
<div class='row'>
<div class='col-md-6'>
<label class='control-label'>Your Name</label>
<input class='form-control' placeholder='your username' type='text'>
</div>
<div class='col-md-6'>
<label class='control-label'>Your Email</label>
<input class='form-control' placeholder='your password' type='text'>
</div>
</div>
</div>
<div class='form-group'>
<div class='row'>
<div class='col-md-12'>
<label class='control-label'>Your Message</label>
<textarea class='form-control' name='' rows='4'></textarea>
</div>
</div>
</div>
</form>
</div>
<div class='modal-footer'>
<button class='btn btn-default' data-dismiss='modal' type='button'>Cancel</button>
<button class='btn btn-primary' type='button'>Send Message</button>
</div>
</div>
</div>
</div>
This Is my Modal Code. 这是我的模态代码。
This calls out the modal: 这称为模态:
Would you like to Contact Us? 您想联系我们吗? Or Visit our
或访问我们的
All Answers given have not solved the problem, or have cause more. 给出的所有答案都不能解决问题,或者引起更多的原因。
Include the following css to your code: 在代码中包含以下CSS:
.modal {
overflow-y:hidden;
}
This will override the default css. 这将覆盖默认的CSS。 It worked for me.
它为我工作。 If its not working try to post your code.
如果不起作用,请尝试发布您的代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.