我们平时做的弹窗底部(也就是主体页面部分)是可以动的如图:
现在在页面主体部分的顶部
现在在主体页面的底部
可以看到当页面中间的弹窗内容较多时,无法显示剩余弹窗的问题:
解决思路:
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','')
})
完!
