出现模态时删除滚动条

时间:2013-11-22 02:30:26

标签: javascript html css css3 twitter-bootstrap-3

我知道这已经被问到但是没有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>  

这是我的模态代码。

这会调出模态:

您想和我们联系吗?或者访问我们的

所有给出的答案都没有解决问题,或者有更多原因。

2 个答案:

答案 0 :(得分:2)

请查看此link。可能这会对你有所帮助。您可以分享您尝试的样本代码吗??? ???

$('#openBtn').click(function () { $('#myModal').modal({ show: true }); });

答案 1 :(得分:1)

在您的代码中包含以下css:

  .modal {
      overflow-y:hidden;
  }

这将覆盖默认的css。它对我有用。如果它不起作用,请尝试发布您的代码。