<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="10

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

欢迎 pr <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-ur

disable window scroll when show about dialog HOT 7 CLOSED

react-component commented on May 21, 2024

disable window scroll when show

from dialog.

Comments (7)

afc163 commented on May 21, 2024

bootstrap 和 semantic-ui 的交互是超过高度时可以滚动，但背景还是固定的。

from dialog.

yiminghe commented on May 21, 2024

目前结构不好实现，先不做

from dialog.

yesmeck commented on May 21, 2024

@yiminghe 很需要这个，接受 PR 吗？

from dialog.

afc163 commented on May 21, 2024

感觉这样体验会好一些：http://getbootstrap.com/javascript/#live-demo

from dialog.

yesmeck commented on May 21, 2024

是的，就是想要这样的效果

from dialog.

yiminghe commented on May 21, 2024

欢迎 pr @yesmeck

from dialog.

dbearscn commented on May 21, 2024

一个应急的办法，项目中实在需要等不及了，改动一些基础代码，和bootstrap中的modal一样了，希望对大家的项目能有帮助....
find rc-dialog/lib/Dialog.js and modify as fellow:

first place:

var className = _defineProperty({}, prefixCls + '-wrap', 1);
    if (props.visible) {
      className = _defineProperty({}, prefixCls + '-wrap '+prefixCls+'-wrap-open', 1);
    }

second place:

[this.getMaskElement(), this.getDialogElement()]
change to
[this.getDialogElement()]

third place:

find function 'componentDidUpdate'

componentDidUpdate: function componentDidUpdate(prevProps) {
    var props = this.props;
    if (props.visible) {
      // first show
      if (!prevProps.visible) {
        this.lastOutSideFocusNode = document.activeElement;
        _reactDom2['default'].findDOMNode(this.refs.dialog).focus();
      }
      /**
       * gary modified start
       */
      if(document.body.className.indexOf("ant-modal-open")<0){
        document.body.className += " ant-modal-open"
      }
      /**
       * gary modified end
       */

    } else if (prevProps.visible) {
      if (props.mask && this.lastOutSideFocusNode) {
        try {
          this.lastOutSideFocusNode.focus();
        } catch (e) {
          this.lastOutSideFocusNode = null;
        }
        this.lastOutSideFocusNode = null;
      }
      /**
       * gary modified start
       */
      if(document.body.className.indexOf("ant-modal-open")>=0){
        document.body.className -= " ant-modal-open"
      }
      /**
       * gary modified end
       */
    }
  }

at last:
add fellow code into your custom css file

.ant-modal-wrap-open{
  position:absolute;
  overflow-y:auto;
  background-color: rgba(55, 55, 55, 0.6);
  bottom: 0;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  z-index: 990;
}

.ant-modal-open{
  overflow-y: hidden;
}

from dialog.

Recommend Projects