bootstrap模态框垂直居中效果

//模态框垂直居中 function centerModals() { $('.modal').each( function(i) { var $clone = $(this).clone().css('display', 'block') .appendTo('body'); var top = 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代码

<!--登陆弹窗--> <form action="__URL__/doLogin" method="post"> <!--模态框声名--> <div tabindex="-1"> <!--窗口声名--> <div> <!--内容声名--> <div> <div> <button data-dismiss="modal"> <span>&times;</span> </button> <h4>用户登录</h4> </div> <div> <div> <label for="username">账号</label> <div> <span aria-hidden="true"></span> <span>(success)</span> <input type="text" placeholder="请输入您的用户名" title="可包含中文数字和常用字符" onkeydown="if(event.keyCode==32||event.keyCode==13){return false;}"> <!-- 禁用空格和回车 --> </div> </div> <div> <label for="password">密码</label> <div> <span aria-hidden="true"></span> <span>(success)</span> <input type="password" maxlength="12" placeholder="请输入您的密码" oncopy="return false" oncut="return false" onpaste="return false" title="" onkeydown="if(event.keyCode==32||event.keyCode==13){return false;}"> </div> </div> </div> <div> <div> <div> <button type="submit">现在登录 »</button> </div> </div> </div> </div> </div> </div> </form>