bootstrap模态框垂直居中效果

bootstrap模态框垂直居中效果

本文实例效果其实就是一个点击弹窗效果，供大家参考，具体内容如下

先上jquery代码

//模态框垂直居中

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",

http:// top - 50);

});

}

$('.modal').on('show.bs.modal', centerModals);

$(window).on('resize', centerModals);

html代码

×

账号

aria-hidden="true">

aria-hidden="true">

class="sr-only">(success)

id="username" name="username" class="form-control"

placeholder="请输入您的用户名" title="可包含中文数字和常用字符"

onkeydown="if(event.keyCode==32||event.keyCode==13){return false;}">

密码

aria-hidden="true">

aria-hidden="true">

class="sr-only">(success)

id="password" name="password" class="form-control"

maxlength="12" placeholder="请输入您的密码" oncopy="return false"

oncut="return false" onpaste="return false" title=""

onkeydown="if(event.keyCode==32||event.keyCode==13){return false;}">

现在登录

»

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。