2016-11-17 10 views
0
<!-- Large modal --> 
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 
    Login modal</button> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" 
    aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
        ×</button> 
       <h4 class="modal-title" id="myModalLabel"> 
        Login/Registration - <a href="http://www.jquery2dotnet.com">jquery2dotnet.com</a></h4> 
      </div> 
      <div class="modal-body"> 
       <div class="row"> 
        <div class="col-md-8" style="border-right: 1px dotted #C2C2C2;padding-right: 30px;"> 
         <!-- Nav tabs --> 
         <ul class="nav nav-tabs"> 
          <li class="active"><a href="#Login" data-toggle="tab">Login</a></li> 
          <li><a href="#Registration" data-toggle="tab">Registration</a></li> 
         </ul> 
         <!-- Tab panes --> 
         <div class="tab-content"> 
          <div class="tab-pane active" id="Login"> 
           <form role="form" class="form-horizontal"> 
           <div class="form-group"> 
            <label for="email" class="col-sm-2 control-label"> 
             Email</label> 
            <div class="col-sm-10"> 
             <input type="email" class="form-control" id="email1" placeholder="Email" /> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label for="exampleInputPassword1" class="col-sm-2 control-label"> 
             Password</label> 
            <div class="col-sm-10"> 
             <input type="email" class="form-control" id="exampleInputPassword1" placeholder="Email" /> 
            </div> 
           </div> 
           <div class="row"> 
            <div class="col-sm-2"> 
            </div> 
            <div class="col-sm-10"> 
             <button type="submit" class="btn btn-primary btn-sm"> 
              Submit</button> 
             <a href="javascript:;">Forgot your password?</a> 
            </div> 
           </div> 
           </form> 
          </div> 
          <div class="tab-pane" id="Registration"> 
           <form role="form" class="form-horizontal"> 
           <div class="form-group"> 
            <label for="email" class="col-sm-2 control-label"> 
             Name</label> 
            <div class="col-sm-10"> 
             <div class="row"> 
              <div class="col-md-3"> 
               <select class="form-control"> 
                <option>Mr.</option> 
                <option>Ms.</option> 
                <option>Mrs.</option> 
               </select> 
              </div> 
              <div class="col-md-9"> 
               <input type="text" class="form-control" placeholder="Name" /> 
              </div> 
             </div> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label for="email" class="col-sm-2 control-label"> 
             Email</label> 
            <div class="col-sm-10"> 
             <input type="email" class="form-control" id="email" placeholder="Email" /> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label for="mobile" class="col-sm-2 control-label"> 
             Mobile</label> 
            <div class="col-sm-10"> 
             <input type="email" class="form-control" id="mobile" placeholder="Mobile" /> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label for="password" class="col-sm-2 control-label"> 
             Password</label> 
            <div class="col-sm-10"> 
             <input type="password" class="form-control" id="password" placeholder="Password" /> 
            </div> 
           </div> 
           <div class="row"> 
            <div class="col-sm-2"> 
            </div> 
            <div class="col-sm-10"> 
             <button type="button" class="btn btn-primary btn-sm"> 
              Save & Continue</button> 
             <button type="button" class="btn btn-default btn-sm"> 
              Cancel</button> 
            </div> 
           </div> 
           </form> 
          </div> 
         </div> 
         <div id="OR" class="hidden-xs"> 
          OR</div> 
        </div> 
        <div class="col-md-4"> 
         <div class="row text-center sign-with"> 
          <div class="col-md-12"> 
           <h3> 
            Sign in with</h3> 
          </div> 
          <div class="col-md-12"> 
           <div class="btn-group btn-group-justified"> 
            <a href="#" class="btn btn-primary">Facebook</a> <a href="#" class="btn btn-danger"> 
             Google</a> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

私のモーダルポップアップには、ログイン&のような2つのタブがあります。登録タブをクリックし、モーダルポップアップを閉じました。私はモーダルポップアップをクリックした後、それを[登録]タブに表示します。どのように可能ですか?あなたがHTMLの構造を変更した場合は、「ログインモーダル」ボタンをクリックは、どのように私はモーダルポップアップの最初のタブにリダイレクトすることができますか?

$(document).ready(function() {  

    $('#myModal').on('shown.bs.modal', function() { 
     $('.nav-tabs a[href="#Login"]').tab('show'); 
    }); 
}); 

上記のコードは動作しませんときは、常にログイン]タブを表示するためにJavaScriptのコードの変更を以下の

+0

下にして下さいここでデモがuの再生のための1人のhttp://bootsnipp.com/snippets/VElzQ#comments – Venky559

答えて

1

メイク。それは、タブのためだったとあなたはthisデモから、タブ機能を削除します。しかしまだ私はあなたのissueを修正しました。それは自動的にモデルのポップアップを示し

$(document).ready(function() {  
    $('#login-modal').on('shown.bs.modal', function() { 
    $('#login').addClass('active'); 
    $('#forgetpassword').removeClass('active'); 
    }); 
}); 
+0

おかげですが、私はjsの中で、あなたのコードを追加した後、その後、私は私のページを更新.Iは、それは「$(」#のmyModal「)によるものである私は、モーダルポップアップ – Venky559

+0

でタブをログインしたときに、私のログインモーダル表示をクリックするだけしたい、そのようにしたくない(ショー」)モーダルを。「;」ライン。それを取り除かなければならなかった。あなたは、私が上のタブを忘れてクリックした後、私は、モーダルポップアップを閉じたが、それは私があなたのロジックをAPPLEDしかし、私は –

+0

couldeに今すぐチェックコードは私のために働いているが、あなたはそれを観察した場合、私は最初のログインモーダルポップアップをクリックしたとき、それは第二、それはタブをログインに行くの割合で持つタブを忘れ示し、uは問題が – Venky559

関連する問題