[英]Remove Scroll Bar when Modal Appears
我知道有人问过这个问题,但尚未100%有效地使用它。
我的页面上有一个模式。 看起来像这样:
https://www.dropbox.com/s/ha4smz4mlgm1z18/Capture.PNG
我想在出现模态时删除滚动条 。 如何使用CSS / JS完成? 还是根本无法做到? 我不想像这里发布的其他示例一样更改模式的高度。
请注意:由于页面的跳跃性,我不想仅在出现模态时将滚动条100%移除。 我正在使用Bootstrap 3.0,(标准Bootstrap皮肤,尽管稍后可能会更改)
额外的信息:
<!-- 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>
这是我的模态代码。
这称为模态:
您想联系我们吗? 或访问我们的
给出的所有答案都不能解决问题,或者引起更多的原因。
一次,请检查此链接 。 可能会对您有帮助。 您可以分享示例代码吗?
$('#openBtn').click(function () { $('#myModal').modal({ show: true }); });
在代码中包含以下CSS:
.modal {
overflow-y:hidden;
}
这将覆盖默认的CSS。 它为我工作。 如果不起作用,请尝试发布您的代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.