欢迎您访问宜州一中 您可以登录 或注册
 
收藏本站 简繁转换
筑梦青春•唱响未来 -宜州区第一中学英文歌曲合唱比赛             一方天地育桃李,三尺讲台竞风采             宜州区一中在宜州博物馆举行“人杰地灵读宜州”故事分享会             宜州一中举行2024届中考百日誓师大会             龙腾启新 筑梦未来 ——宜州区第一中学欢庆2024年元旦文艺晚会             走进嘉联丝厂 畅享研学之乐 ——宜州区第一中学开展研学实践活动             2023年河池市宜州区第一中学/宜州区红卫学校家庭经济困难大学新生入学资助项目发放名册(第二批)             展科技志向,圆飞行梦想 ——宜州区一中2025届举行无人机大赛             2023年河池市宜州区第一中学\红卫学校 家庭经济困难大学新生入学资助项目发放名册(第一批)             法制进校园 以法促成长 ——宜州一中举行“三姐护蕾”法治进校园活动            

DoraCMS

您现在的位置是:首页>文档内容页

文档详情

bootstrap 3.3 模态框垂直居中问题

doramart 2024-05-19 22:46:42 初中部风采235165
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计.Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

   Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计.Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

   用过Bootstrap的童鞋有时候都会遇到一个问题,关于模态窗口,总是从上面slide下来,位置并不居中,在网上找了一些方式,例如弹出窗口后修改css,可以实现,还可以通过修改原生bootstrap.js 文件来调整下拉模态窗口的位置,下面介绍一种简单移动的方式,让模态窗口在屏幕上居中显示:

/* center modal */
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);
    });
}
$('.modal').on('show.bs.modal', centerModals);
$(window).on('resize', centerModals);


文章评论

取消回复
登录 参与评论

评论列表(