モーダルボックスを開いたときに背景フェーディングを削除する方法

Question

モーダルを開いたときモーダルバックグラウンドフェードを削除するには、モーダルを開いたときにバックグラウンドでスクロールする必要がありますが、誰でも助けを提案できます。ありがとうございます。

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; 
} 

Answer 1

ときモーダルが開いてそれはあなたのbodyがaddClassmodal-openの名前を取得、bootstrap-modalすることで、デフォルトを引き起こしました。ここで

Answer 2

D：そのクラスは、あなたはそれが{overflow: hidden}

ので、あなただけのクラスを削除する必要があり、この問題を解決するためにスクロールすることはできません作り、

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

が、それはあなたを助けることを願って、このコードを試してみてくださいあなたは解決策をとる。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>

希望すると、これが役に立ちます。