bootstrap模态框垂直居中效果
本文实例效果其实就是一个点击弹窗效果，供大家参考，具体内容如下
先上jquery代码
//模态框垂直居中
functioncenterModals(){
$('.modal').each(
function(i){
var$clone=$(this).clone().css('display','block')
.appendTo('body');
vartop=Math.round(($clone.height()-$clone.find(
'.modal-content').height())/2);
top=top>0?top:0;
$clone.remove();
$(this).find('.modal-content').css("margin-top",
top-50);
});
}
$('.modal').on('show.bs.modal',centerModals);
$(window).on('resize',centerModals);
html代码
<!--登陆弹窗-->
<formaction="__URL__/doLogin"method="post"class="form-horizontal">
<!--模态框声名-->
<divclass="modal"id="myModal"tabindex="-1">
<!--窗口声名-->
<divclass="modal-dialogmodal-sm">
<!--内容声名-->
<divclass="modal-content">
<divclass="modal-header">
<buttonclass="close"data-dismiss="modal">
<span>×</span>
</button>
<h4class="modal-title">用户登录</h4>
</div>
<divclass="modal-body">
<divclass="form-grouphas-successhas-feedback">
<labelfor="username"class="col-sm-3control-label">账号</label>
<divclass="col-sm-9">
<spanclass="glyphiconglyphicon-userform-control-feedback"
aria-hidden="true"></span><spanid="inputSuccess3Status"
class="sr-only">(success)</span><inputtype="text"
id="username"name="username"class="form-control"
placeholder="请输入您的用户名"title="可包含中文数字和常用字符"
onkeydown="if(event.keyCode==32||event.keyCode==13){returnfalse;}">
<!--禁用空格和回车-->
</div>
</div>
<divclass="form-grouphas-successhas-feedback">
<labelfor="password"class="col-sm-3control-label">密码</label>
<divclass="col-sm-9">
<spanclass="glyphiconglyphicon-lockform-control-feedback"
aria-hidden="true"></span><spanid="inputSuccess3Status"
class="sr-only">(success)</span><inputtype="password"
id="password"name="password"class="form-control"
maxlength="12"placeholder="请输入您的密码"oncopy="returnfalse"
oncut="returnfalse"onpaste="returnfalse"title=""
onkeydown="if(event.keyCode==32||event.keyCode==13){returnfalse;}">
</div>
</div>
</div>
<divclass="modal-footer">
<divclass="form-group">
<divclass="col-sm-offset-2col-sm-10">
<buttontype="submit"class="btnbtn-success"id="login">现在登录
»</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。