2016-11-17 37 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> 

我的模态弹出有两个标签,如登录&注册,我点击注册选项卡,然后关闭模式弹出,我点击模式弹出后它在注册选项卡,但我想显示登录选项卡。这怎么可能?在JavaScript关闭模式弹出窗口后,如何重定向到模式弹出框中的第一个选项卡?

+0

这里是演示一个http://bootsnipp.com/snippets/VElzQ#comments – Venky559

回答

1

制作下面的代码更改显示的登录选项卡总是当点击“登录莫代尔”按钮

$(document).ready(function() {  

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

如果更改HTML结构上面的代码将无法正常工作。这是用于制表符,并且您从this演示中删除了选项卡功能。但是我仍然修复了你的issue。请看下面

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

感谢ü重播,但之后我在JS添加你的代码,然后我刷新我的网页,它会自动显示模式弹出.i不想那样,我只希望当我点击登录模式时只显示模式弹出的LOG选项卡 – Venky559

+0

这是由于'$('#myModal')。modal('show');'线。已经删除它。立即检查 –

+0

coulde你告诉这个例子http://bootsnipp.com/snippets/z7ANK – Venky559

相关问题