easysoft / zui

ZUI is an HTML5 front UI framework.
https://openzui.com
MIT License
2.71k stars 690 forks source link

1.9.1版本新增对话框scroll 滚动设置modal body的max-height问题 #169

Closed jiaminghai closed 4 years ago

jiaminghai commented 4 years ago

希望判断modal-body的max-height的时候把modal-footer的高度也减去(如果modal-footer存在的情况下) ` var $dialog = that.$element.find('.modal-dialog'); var winHeight = $(window).height();

    var bodyCss = {maxHeight: 'initial', overflow: 'visible'};
    var $body = $dialog.find('.modal-body').css(bodyCss);
    if (options.scrollInside) {
        var headerHeight = options.headerHeight;
        if (typeof headerHeight !== 'number') {
            headerHeight = $dialog.find('.modal-header').height();
        } else if ($.isFunction(headerHeight)) {
            headerHeight = headerHeight($header);
        }
        bodyCss.maxHeight = winHeight - headerHeight;
        if ($body.outerHeight() > bodyCss.maxHeight) {
            bodyCss.overflow = 'auto';
        }
    }
    $body.css(bodyCss);`
jiaminghai commented 4 years ago

另外,这个查了看jquery文档, $dialog.find('.modal-header').height(true); 这个高度用outerHeight(true)吧 $dialog.find('.modal-header').outerHeight(true);

jiaminghai commented 4 years ago

发现改为

$dialog.find('.modal-header').outerHeight(true); 后,启用背景遮罩时,backdrop=“true”右侧会多出来一个垂直滚动条。 不启用背景遮罩backdrop=“false",不会多出来垂直滚动条,功能不影响,就是感觉两个滚动条有点难受 image

image 目前解决办法是bodyCss.max-Height多减去2px,不知有多个modal同时打开的情况是否这个还得再多减些(#^.^#)

还有个办法就是把这个样式.modal-open .modaloverflow-y 给覆盖掉,重新写个CSS样式 image

catouse commented 4 years ago

已修复,请关注近期版本发布。