bootstrap的模态框问题

本人在写一个网站程序的时候,之前学了bootstrap,就在这个项目中用到了bootstrap,很好用,开发的速度大大提高,不过有遇到几个问题,记下来:


想实现通过模态框弹出登录、注册操作页面


根据bootstrap的文档,可以通过设置url来获取数据源来渲染页面。


因为多个页面需要用到这个,我就进行尝试,结果出现了点击一次,背景的蒙版就越来越黑,直到看不见父页面(此问题没有得到解决)...




弹出框还有一个问题,就是不是垂直居中,很不好看,于是找解决方案。


发现通过修改bootstrap的源码,可以实现垂直居中的效果。


也行老外对居中无感?


加上如下代码即可实现



Modal.prototype.adjustDialog = function () {
    var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight
    this.$element.css({
      paddingLeft:  !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
      paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
    })
    // 是弹出框居中。。。
    var $modal_dialog = $(this.$element[0]).find('.modal-dialog');
    var m_top = ( $(window).height() - $modal_dialog.height() )/2;
    $modal_dialog.css({'margin': m_top + 'px auto'});
  }

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值