打开模态框时如何消除背景褪色答案

【问题标题】：How to remove background fading when modal box is opened打开模态框时如何消除背景褪色
【发布时间】：2017-08-07 14:16:26
【问题描述】：

如何在打开模式时删除模式背景褪色，我有一个屏幕，当打开模式时，它应该在背景上滚动，但在我的情况下是隐藏的。任何人都可以建议帮助。谢谢。

screen

 <div class="modal fade registermodal" id="login-register-model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-body paddingbody">
            <div class="modal-content">
                     <div class="modal-body paddingmodal2">
                         <form id="login-form" name="loginForm" ng-if="showLoginForm" class="nobottommargin" novalidate="">
                         <div class="text-center social-login-sec">
                         <a class="col-xs-12 btn btn-primary social-login-btn"  id="facebook_login" rel='nofollow' href="/auth/facebook" target="_self" data-ng-click="onClickSocialBtn();">Facebook</a>
                </div>
            </div>
        </div>
    </div>
</div>

css

.modal-backdrop {
    z-index: 0;
 }

【问题讨论】：

它应该在背景上滚动我不确定你的意思。
嗨，BSMP，我附上了屏幕截图，我正在获取滚动条，但由于它已褪色，因此无法访问它。
所以您希望在模式打开时页面可滚动而不是模式？我能问为什么吗？（此外，演示您的问题的代码将比屏幕截图更有帮助。）
是的，我希望我的模式可以滚动。
Bootstrap 的正常默认行为是为此工作。（如果我使用文档中的演示模态代码并使其变高，我可以滚动它。）如果您需要有人调试您的代码，那么您需要在问题中包含足够的代码来重现问题。

标签： html css twitter-bootstrap bootstrap-modal

【解决方案1】：

默认是bootstrap-modal造成的，当modal打开时，你的body得到addClass命名为modal-open。那门课让你无法滚动它{overflow: hidden}

所以要解决这个问题，你只需要删除类，试试这个代码

$('#login-register-model').on('show.bs.modal', function (e) {
  $("body").removeClass("modal-open")
})

希望对你有帮助：D

【讨论】：

【解决方案2】：

这里有一个解决方案http://jsfiddle.net/0fscmf3L/2625/

.modal-body .form-horizontal .col-sm-2,
.modal-body .form-horizontal .col-sm-10 {
    width: 100%
}

.modal-body .form-horizontal .control-label {
    text-align: left;
}
.modal-body .form-horizontal .col-sm-offset-2 {
    margin-left: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalNorm">
    Launch Normal Form
</button>

<!-- Modal -->
<div class="modal" id="myModalNorm" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                
                <form role="form">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                      <input type="email" class="form-control"
                      id="exampleInputEmail1" placeholder="Enter email"/>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                      <input type="password" class="form-control"
                          id="exampleInputPassword1" placeholder="Password"/>
                  </div>
                  <div class="checkbox">
                    <label>
                        <input type="checkbox"/> Check me out
                    </label>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                      <input type="email" class="form-control"
                      id="exampleInputEmail1" placeholder="Enter email"/>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                      <input type="password" class="form-control"
                          id="exampleInputPassword1" placeholder="Password"/>
                  </div>
                  <div class="checkbox">
                    <label>
                        <input type="checkbox"/> Check me out
                    </label>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                      <input type="email" class="form-control"
                      id="exampleInputEmail1" placeholder="Enter email"/>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                      <input type="password" class="form-control"
                          id="exampleInputPassword1" placeholder="Password"/>
                  </div>
                  <div class="checkbox">
                    <label>
                        <input type="checkbox"/> Check me out
                    </label>
                  </div>
                  <button type="submit" class="btn btn-default">Submit</button>
                </form>
                
                
            </div>
            
            <!-- Modal Footer -->
            <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>
    </div>
</div>

希望这会对你有所帮助。

【讨论】：