<!-- 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>
我的模态弹出窗口有两个标签,例如login&amp;注册,我点击注册标签,然后关闭模态弹出窗口,我单击模式弹出窗口后,它在注册选项卡,但我想显示登录选项卡。怎么可能?
答案 0 :(得分:1)
在JavaScript中进行以下代码更改,以便在单击&#34;登录模式&#34;时始终显示登录选项卡。按钮
$(document).ready(function() {
$('#myModal').on('shown.bs.modal', function() {
$('.nav-tabs a[href="#Login"]').tab('show');
});
});
如果您更改HTML结构,则上述代码无法正常工作。这是for tab,您从this demo中删除了标签功能。但我仍然修复了你的issue。在下面找到
$(document).ready(function() {
$('#login-modal').on('shown.bs.modal', function() {
$('#login').addClass('active');
$('#forgetpassword').removeClass('active');
});
});