1. ホーム
  2. 質問と答え
  3. この状況の解決策は何ですか？

この状況の解決策は何ですか？

2017-07-20 15 views
-1

別のモーダルを変更しているときに、「モーダルオープン」クラスがボディから削除され、モーダルモードでY軸が正しくスクロールされませんか？ここでこの状況の解決策は何ですか？

はJSFiddle

親切に解決策を提案しているのですか？

CODE：

<html> 
<body> 
<div class="wrapper"> 
     <!--=== Header v8 ===--> 
     <div class="header-v8 header-sticky"> 
      <!-- Topbar blog --> 
      <div class="blog-topbar gap-top-5s"> 
       <div class="container"> 
        <div class="row"> 
         <div class="col-sm-4 col-sm-offset-4 clearfix"> 
          <ul class="list-inline"> 
           <li class="cd-log_reg home"><button class="cd-signin btn-primary" data-target="#login-modal" data-toggle="modal" role="button" href="#"><i class="fa fa-sign-in"></i> Sign in</button></li> 
           <li class="cd-log_reg"><button class="cd-signin btn-primary" data-target="#register-modal" data-toggle="modal" role="button" href="#"><i class="fa fa-sign-up"></i> Sign up</button></li> 
          </ul> 
         </div> 
        </div><!--/end row--> 
       </div><!--/end container--> 
      </div> 
      <!-- End Topbar blog --> 
     </div> 
    </div> 



<!-- MODAL-STARTS --> 

<!-- BEGIN # MODAL LOGIN --> 
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> 
     <div class="modal-dialog"> 
      <div class="modal-content col-sm-12"> 
       <div class="modal-header" align="center"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
         <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
        </button> 
       </div> 

       <!-- Begin # DIV Form --> 
       <div id="div-forms"> 

        <!-- Begin # Login Form --> 
        <form id="login-form"> 
         <div class="modal-body"> 
          <center><h4 class="skyblue-txt bline-btm pad-btm-10">LOGIN</h4></center> 
          <div class="form-group"> 
           <label class="skyblue-txt"><i class="fa fa-user"></i> Username</label> 
           <input id="login_username" class="form-control cst-control" placeholder="Username " required="" type="text"> 
          </div> 
          <div class="form-group"> 
           <label class="skyblue-txt"><i class="fa fa-lock"></i> Password</label> 
           <input id="login_password" class="form-control cst-control" placeholder="Password" required="" type="password"> 
          </div> 
          <div class="form-group"> 
           <div class="checkbox"> 
            <label class="skyblue-txt"> 
             <input type="checkbox"> Remember me 
            </label> 
           </div> 
          </div> 
         </div> 
         <div class="modal-footer"> 
          <div class="form-groups"> 
           <button class="btn btn-5 btn-primary"><span>Login</span></button> 
          </div> 
          <div class="form-group text-center"> 
           <a class="cd-signin lostform">Forget Password</a><br> 
           <span class="">New User</span> <a href="#" role="button" class="myloginpage1">Register Now</a> 
          </div> 
         </div> 
        </form> 
        <!-- End # Login Form --> 



       </div> 
       <!-- End # DIV Form --> 

      </div> 
     </div> 
</div> 
<div class="modal fade" id="register-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> 
     <div class="modal-dialog"> 
      <div class="modal-content col-sm-12"> 
       <div class="modal-header" align="center"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
         <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
        </button> 
       </div> 

       <!-- Begin # DIV Form --> 
       <div id="div-forms"> 
       <!-- Begin | Register Form --> 
        <form id="register-form"> 
         <div class="modal-body"> 
          <center><h4 class="bline-btm pad-btm-10">REGISTER</h4></center> 
          <div id="div-register-msg"> 
           <center><div id="icon-register-msg" class="fa fa-facebook"></div> 
           <a href="#"><span id="text-register-msg">Register with facebook</span></a></center> 
          </div> 
          <div class="form-group"> 
           <input id="register_username" class="form-control cst-control" placeholder="Full Name" required="" type="text"> 
          </div> 
          <div class="form-group"> 
           <input id="register_email" class="form-control cst-control" placeholder="E-Mail" required="" type="text"> 
          </div> 
          <div class="form-group"> 
           <input id="password" class="form-control cst-control" placeholder="Password" required="" type="text"> 
          </div> 
          <div class="form-group"> 
           <input id="password" class="form-control cst-control" placeholder="Re-enter Password" required="" type="text"> 
          </div> 
         </div> 
         <div class="modal-footer"> 
          <div> 
           <button class="btn btn-5 btn-primary"><span>Register</span></button> 
          </div> 
          <div class="last-btngroup"> 
           <a class="cd-signin myloginpage" href="#">Log In</a> 
           <a class="lostform" href="#">Forget Password</a> 
          </div> 
         </div> 
        </form> 
        <!-- End | Register Form --> 

       </div> 
       <!-- End # DIV Form --> 

      </div> 
     </div> 
    </div> 
    <!-- END # MODAL LOGIN --> 
<div class="modal fade" id="lost-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> 
     <div class="modal-dialog"> 
      <div class="modal-content col-sm-12"> 
       <div class="modal-header" align="center"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
         <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
        </button> 
       </div> 

       <!-- Begin # DIV Form --> 
       <div id="div-forms"> 
       <!-- Begin | Lost Password Form --> 
        <form id="lost-form"> 
         <div class="modal-body"> 
          <div id="div-lost-msg"> 
           <div id="icon-lost-msg" class="glyphicon glyphicon-chevron-right"></div> 
           <span id="text-lost-msg">Type your e-mail.</span> 
          </div> 
          <input id="lost_email" class="form-control cst-control" placeholder="E-Mail" required="" type="text"> 
         </div> 
         <div class="modal-footer"> 
          <div> 
           <button class="btn btn-5 btn-primary"><span>Submit</span></button> 
          </div> 
          <div class="last-btngroup"> 
           <a class="cd-signin myloginpage" href="#">Log In</a> 
           <a href="#" role="button" class="myloginpage1">Register</a> 
          </div> 
         </div> 
        </form> 
        <!-- End | Lost Password Form --> 
        </div> 
       <!-- End # DIV Form --> 

      </div> 
     </div> 
    </div> 
    </body></html>

CSS：

.btn-primary { 
    border: 2px solid #337ab7; 
    border-radius: 3px; 
    float: left; 
    font-size: 18px; 
    letter-spacing: 2px; 
    margin-bottom: 15px; 
    min-width: 300px; 
    padding: 15px; 
    text-align: center; 
    text-transform: uppercase; 
    width: 100%; 
    text-decoration:none; 
} 
/* SIGN-IN-MODAL */ 
/* MODAL-CSS */ 

#login-modal .modal-dialog { 
    width: 350px; 
} 
#register-modal .modal-dialog { 
    width: 350px; 
} 
#lost-modal .modal-dialog { 
    width: 350px; 
} 


#div-login-msg, #div-lost-msg, #div-register-msg { 
    border: 0 none; 
    height: 30px; 
    line-height: 28px; 
    margin-bottom: 15px; 
    transition: all 500ms ease-in-out 0s; 
} 

#div-login-msg.success, 
#div-lost-msg.success, 
#div-register-msg.success { 
    border: 1px solid #68c3a3; 
    background-color: #c8f7c5; 
} 

#div-login-msg.error, 
#div-lost-msg.error, 
#div-register-msg.error { 
    border: 1px solid #eb575b; 
    background-color: #ffcad1; 
} 

#icon-login-msg, #icon-lost-msg, #icon-register-msg { 
    background-color: #3b5998; 
    color: #fff; 
    float: left; 
    line-height: 28px; 
    margin-right: 5px; 
    text-align: center; 
    transition: all 500ms ease-in-out 0s; 
    width: 30px; 
} 

#icon-login-msg.success, 
#icon-lost-msg.success, 
#icon-register-msg.success { 
    background-color: #68c3a3 !important; 
} 

#icon-login-msg.error, 
#icon-lost-msg.error, 
#icon-register-msg.error { 
    background-color: #eb575b !important; 
} 

#img_logo { 
    max-height: 100px; 
    max-width: 100px; 
} 

/* ######################################### 
    # override the bootstrap configs  # 
    ######################################### */ 

.modal-backdrop.in { 
    filter: alpha(opacity=50); 
    opacity: .8; 
} 

.modal-content { 
    background-color: #ececec; 
    border: 1px solid #bdc3c7; 
    border-radius: 0px; 
    outline: 0; 
} 

.modal-header { 
    min-height: 16.43px; 
    padding: 15px 15px 15px 15px; 
    border-bottom: 0px; 
} 

.modal-body { 
    position: relative; 
    padding: 5px 15px 5px 15px; 
} 

.modal-footer { 
    padding: 15px 15px 15px 15px; 
    text-align: left; 
    border-top: 0px; 
} 

.checkbox { 
    margin-bottom: 0px; 
} 

.btn { 
    border-radius: 0px; 
} 

.btn:focus, 
.btn:active:focus, 
.btn.active:focus, 
.btn.focus, 
.btn:active.focus, 
.btn.active.focus { 
    outline: none; 
} 

.btn-lg, .btn-group-lg>.btn { 
    border-radius: 0px; 
} 

.btn-link { 
    color: #95a5a6; 
} 

.btn-link:hover, .btn-link:focus { 
    color: #2c3e50; 
    text-decoration: none; 
} 

.glyphicon { 
    top: 0px; 
} 

.form-control { 
    border-radius: 0px; 
} 
#div-login-msg > span { 
    font-size: 12px; 
} 
.pad-btm-10{padding-bottom:10px;} 
#login-form label{font-weight:100; font-family:Montserrat; } 
#login-modal, #register-modal, #lost-modal{background:rgba(0, 0, 0, 0.7)} 
#login-modal .modal-dialog { 
    max-width: 380px; 
    width: 100%; 
    top:10%; 
} 
#register-form .form-control::-moz-placeholder { 
    color: #999; 
    opacity: 1; 
} 

.vfy-btn { 
    float: left; 
    font-size: 11px; 
    margin-top: 10px; 
    padding: 2px 25px; 
    text-transform: uppercase; 
    background:#0097d0; color:#fff; 
} 
.vfy-btn :hover{color:#fff;} 
.cd-signin.lostform { 
    float: left; 
    margin-bottom: 10px; 
    margin-top: 15px; 
    width: 100%; 
    color:#0dbc42; 
} 
.myloginpage1{color:#0dbc42;} 

.last-btngroup{ 
    margin-top:10px; 
    color:#0dbc42; 
} 
.last-btngroup a{color:#0dbc42;} 
.last-btngroup a:first-child{margin-right:15px;} 

/* 
INDIVIDUAL-CAT */ 
/* bhoechie tab */ 
div.bhoechie-tab-container{ 
    z-index: 10; 
    position: fixed; 
    right:0; 
    top:15px; 
    padding: 0 !important; 
    margin: 0px; 
    background-clip: padding-box; 
    opacity: 0.97; 
    filter: alpha(opacity=97); 
} 
div.bhoechie-tab-menu{ 
    padding-right: 0; 
    padding-left: 0; 
    padding-bottom: 0; 
} 
div.bhoechie-tab-menu div.list-group{ 
    margin-bottom: 0; 
} 
div.bhoechie-tab-menu div.list-group>a{ 
    margin-bottom: 0; 
} 
div.bhoechie-tab-menu div.list-group>a .glyphicon, 
div.bhoechie-tab-menu div.list-group>a .fa { 
    color: #5A55A3; 
} 
div.bhoechie-tab-menu div.list-group>a:first-child{ 
    border-top-right-radius: 0; 
    -moz-border-top-right-radius: 0; 
} 
div.bhoechie-tab-menu div.list-group>a:last-child{ 
    border-bottom-right-radius: 0; 
    -moz-border-bottom-right-radius: 0; 
} 
div.bhoechie-tab-menu div.list-group>a.active, 
div.bhoechie-tab-menu div.list-group>a.active .glyphicon, 
div.bhoechie-tab-menu div.list-group>a.active .fa{ 
    background-color: #5A55A3; 
    background-image: #5A55A3; 
    color: #ffffff; 
} 
div.bhoechie-tab-menu div.list-group>a.active:after{ 
    content: ''; 
    position: absolute; 
    right: 100%; 
    top: 50%; 
    margin-top: -13px; 
    border-bottom: 13px solid transparent; 
    border-top: 13px solid transparent; 
    border-right: 10px solid #5A55A3; 
} 

div.bhoechie-tab-content{ 
    background-color: #ffffff; 
    /* border: 1px solid #eeeeee; */ 
    /*padding-left: 20px;*/ 
    padding-top: 10px; 
} 

div.bhoechie-tab>div.bhoechie-tab-content:not(.active) { 
    display:none; 
} 
.gap-top-5s{margin-top:7%;}

JSは：

$(".myloginpage").click(function(){ 
    $('#lost-modal').modal('hide'); 
    $('#register-modal').modal('hide'); 
    $("#login-modal").modal('show'); 
}); 
    $(".myloginpage1").click(function(){ 
    $('#lost-modal').modal('hide'); 
    $('#login-modal').modal('hide'); 
    $("#register-modal").modal('show'); 
}); 

    $(".lostform").click(function(){ 
    $('#register-modal').modal('hide'); 
    $('#login-modal').modal('hide'); 
    $("#lost-modal").modal('show'); 
});

出典

2017-07-20 Sangrai

+0

作業

$(document) .on('shown.bs.modal', '.modal', function() { $(document.body).addClass('modal-open') });

は私には正常に動作するようです。問題の詳細を説明してください。 – Ionut

+0

私はいくつかのより多くのコンテンツと同じプロセスを使用して別のページを持っています。ボタンの1つをクリックしている間、モーダルオープンクラスはボディに追加され、ページ全体が隠されてしまいます。バックページページのスライドは、このクラスのために停止されますが、登録をクリックすると、ログインのモーダルを開いたまま、本体から開いたモーダルクラスが削除され、ページがスクロールダウンします。私は背部の部分の非アクティブではなくモーダルアクティブ部分をスクロールしたい。 – Sangrai

+0

質問の要点を示唆する有用な質問タイトルを考えてください。 – deceze

答えて

0

それはあなたを助けることができます。 jsfiddle

出典

2017-07-20 08:06:40

+0

閉じるボタンをクリックしている間に "モーダルオープン"クラスを削除する必要があります。 – Sangrai

+0

閉じるボタンでclickイベントを作り、ボディから 'modal-open'クラスを削除します。 –

+0

上記の関数に関数を追加できますか？ – Sangrai

0 
$(document).on('hidden.bs.modal', '.modal', function() { 
    $(document.body).addClass('modal-open') 
});

出典

2017-07-20 08:17:32 khushi

+0

これは質問への答えを提供しません。十分な[評判]（https://stackoverflow.com/help/whats-reputation）があれば、[投稿にコメントする]ことができます（https://stackoverflow.com/help/privileges/comment）。代わりに、[質問者からの明確化を必要としない回答を提供する]（https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-c​​an- i-do-代わりに）。 - [レビューの投稿]（レビュー/低品質の投稿/ 16770472） – Lag

+0

@khushi閉じるモーダルオープンクラスをクリックしている間は、削除する必要があります – Sangrai

+0

あなたの答えはありますか？ – khushi

関連する問題

 関連する問題