Bootstrap Modal 不使用默认浏览器页面滚动条滚动

Question

我在 php/codeIgniter 工作。但是我的问题与引导模式有关。
我编写的 Modal 的 HTML 如下：

<li><a href="#contactmodel" data-toggle="modal">Contact us</a>
    <div id="contactmodel" class="modal fade cmodal" role="dialog">
        <div class="modal-dialog modal-sm" role="document">                             
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title cus-modal-title">Contact Us | <span class="cus-modal-stitle">have your say...</span></h4>
                        </div>
                        <div class="modal-body">
                           <div class="col-md-10 col-md-offset-1 cus-model-margin">
                 <?php
                    $attributes = array('name' => 'contactform',
                    'target' => '_self',
                    'id' => 'contact', 'class' => 'htmlform' 
                     );
                     echo form_open('contactus', $attributes);
                     ?>                 
    <div class="form-group">
    <input type="text" class="form-control inputstyle-text" name="nick" id="nick" placeholder="Write your nick name ..." ng-model="nick" type="text" required pattern="^[A-Za-z]{5,15}$" title="Only alphabets allowed. Min. 2 & Max. 15" style="text-transform: lowercase">  <span class="glyphicon glyphicon-user" style="color: red"></span></input>
    </div>
    <div class="form-group">
    <input type="email" class="form-control inputstyle-text" name="email" id="email" placeholder="Write your email ..." ng-model="email" required type="email"   style="text-transform: lowercase">  <span class="glyphicon glyphicon-envelope" style="color: red"></span></input>
    </div>
    <div class="form-group">
    <textarea class="form-control text-style" rows="5" name="msg" id="msg" placeholder="Anything to say ..." ng-model="text" type="msg" required pattern="^[A-Za-z]{100,300}$" title="Only alphabets allowed. Max. 300" style="text-transform: lowercase"> </textarea>  <span class="glyphicon glyphicon-font" style="color: red"></span>
    </div>
    <div class="form-group">
    <button type="submit" name="submit" class="btn btn-primary">Send  <span class="glyphicon glyphicon-envelope" style="color: black"></span></button>
    </div>
            <?php echo form_close(); ?>             
                </div>  
                                        </div>
                                    </div>                          
                                </div>
                        </div>                          
                    </li>  

我正在使用 Bootstrap，但是我为 Modal 添加了一些自定义 css，仅此而已，如下所示：

.cus-modal-title{

     color: black;
     text-align: left !important;

 }
 .cus-modal-stitle{

     font-size: 10px;   

  }
  .cus-model-margin{

      margin-left: 0.333333% !important;
   }
   .modal.fade.in {

      top: 40% !important;
    }
    .cmodal{

      z-index: 1051 !important;

     }
     a:focus {

        outline: thin dotted #333;
        outline: 0px auto -webkit-focus-ring-color !important; 
        outline-offset: -2px;
      }
      .cus-model-body{

        background: url('../images/content.png');

       }

我已通过 contact-us 链接将模态框放在 footer 中。
现在的问题是模态框不随网络浏览器页面的默认滚动条。我使用的是 google-chrome。
任何形式的帮助将不胜感激。

Answer 1

当我下载官方的引导 css 并替换为旧的，因为它已经被修改后，问题得到了解决。

Answer 2

这是因为位置属性应用于“.modal-dailog”类。

如果您希望模态框随浏览器滚动条滚动，则必须将“.modal-dailog”类的位置设置为固定。我认为，默认情况下，它是绝对的并隐藏浏览器的滚动条，这样用户将永远无法滚动窗口，而模式将始终显示在屏幕上。

谢谢