跳出弹窗内容超出问题

我们平时做的弹窗底部(也就是主体页面部分)是可以动的如图:

现在在页面主体部分的顶部 现在在主体页面的底部

可以看到当页面中间的弹窗内容较多时,无法显示剩余弹窗的问题:

解决思路:

1.页面必须不随弹窗滚动而滚动,

2.弹窗超出部分加上滚动条.

解决方案:

加上一段js代码当点击进入弹窗按钮时让主体页面的body,overflow:hidden,然后把height改为100%;

弹窗关闭时,再把body的属性删除

$('.ivu-btn-now').on('click',function() {

$('.ivu-modal-wrap-create').show()

$('body').addClass('css-body')

$('.css-body').css({'overflow': 'hidden',

'height': '100%'})

})

可以发现这时弹窗就已经固定了,不随主体页面部分而滚动了

图为页面主体滚动条已被隐藏

为了能让弹窗多余部分滚动显示,还要给弹窗的最大父元素加上overflow:auto;

滚动条出现弹窗多余部分露出

最后一步当点击关闭弹窗按钮时我们还要把主体部分的body里的属性改回去,不然主体页面就固定死了,(设置body的style为空就行了)

$('.ivu-cross').on('click',function() {

        $('.ivu-modal-wrap-create').hide()

        $('.css-body').attr('style','')

})

完!