bootstrap中多个modal之间的切换

1、两个弹出modal的按钮，点击登录弹出登录的modal，点击注册弹出注册的modal

<span class="head-btn" id="login-btn">登录</span>

 <span class="head-btn" id="reg-btn">注册</span>

2、两个modal

<!--登录弹出框start-->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="pop-login" style="display:none;">
<div class="modal-dialog">
<div class="modal-content" id="pop-reg-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="close-login"><img src="__IMG__/pop-close.png"/></button>
</div>
<div class="modal-body">
<h4 class="modal-title" id="myModalLabel"><img src="__IMG__/pop-logo.png"/></h4>
<form action="" method="">
<p>
<input type="text" name="login-mobile" id="login-mobile" placeholder="手机号"/>
</p>
<p>
<input type="submit" value="登录" id="pop-log-btn"/>
</p>
</form>
<p class="row" style="text-align:center;"><a  href="javascript:;" id="pop-reg-a">没有账号，点击注册</a></p>
</div>
</div>
</div>
</div>
<!--登录弹出框end-->
<!--注册弹出层start-->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true" id="pop-reg" style="display:none;">
<div class="modal-dialog">
<div class="modal-content" id="pop-reg-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="close-reg"><img src="__IMG__/pop-close.png"/></button>
</div>
<div class="modal-body" id="pop-reg-body">
<h4 class="modal-title" id="myModalLabel2"><img src="__IMG__/pop-logo.png"/></h4>
<form action="" method="">
<p style="margin-bottom:-15px;">
<input type="text" name="reg-mobile" id="reg-mobile" placeholder="手机号"/><a href="" id="get-verify-a">获取验证码</a>
</p>
<p style="font-size:14px;font-family:Microsoft YaHei;color:#666;margin-bottom:4px;">
<input type="text" name="reg-verify" id="reg-verify" placeholder="验证码"/>
</p>
<p>
<img src="__IMG__/reg-checked.png" id="reg-checkbox" class="checked"/>
<input type="checkbox" name="reg-read" id="reg-read" style="display:none;" checked="checked"/>
<span style="display:inline-block;float:left;">我已阅读并同意相关</span>
<a  href="{:U('Home/User/protocol')}" style="float:left;">用户协议</a>
<a href="javascript:;" id="reg-to-log">账号登录</a>
</p>
<p style="margin-bottom:0;">
<input type="submit" value="注册" id="pop-reg-btn"/>
</p>
</form>
</div>
</div>
</div>
</div>

3、点击事件分别显示两个弹出框

$("#login-btn").on('click',function(){
$('#pop-login').modal();
});
$("#reg-btn").on('click',function(){
$('#pop-reg').modal();
});

4、在弹出的两个modal上，可以看到分别有“没有账号，点击注册”和“账号登录”两个按钮。并且点击前者将显示注册的modal，点击后者将显示登录的modal。

5、因为在两个modal上分别有关闭按钮，所以可以通过a按钮的点击事件触发b按钮的点击事件来实现。代码如下，

//登录到注册
$("#pop-reg-a").on('click',function(){
$("#close-login").trigger("click");
$('#pop-reg').modal();
});

//注册到登录
$("#reg-to-log").on('click',function(){
$("#close-reg").trigger('click');
$('#pop-login').modal();
});