Venky559 Venky559 - 18 days ago 4
AngularJS Question

How can I redirect to first tab in modal popup after I close the modal popup?

<!-- 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>


My modal popup has two tabs like login & registration, I clicked registration tab then closed the modal popup, after I click the modal popup it is in Registration tab but I want to show login tab. How is it possible?

Answer

Make following code change in JavaScript to show login tab always when click on "Login Modal" button

$(document).ready(function() {      

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