语义反应模态奇怪的高度行为

Question

这是我在使用 semantic UI React modal: I do as shown on their website, but weirdly my Modal moves around like in this GIF of what is happening 时遇到的问题。

我不知道如何解决这个问题。这是我的代码：

class Success extends React.Component {
  constructor () {
    super();
    this.closeModal = this.closeModal.bind(this)
    this.state = {
      Modalopen: true,
      Orders: "",
      urlparameter: qs.parse(location.search.replace(/^.*?\=/, ''))
    }
  }

  closeModal () {
    this.setState({Modalopen: false})
    this.props.history.pushState(null, "/")
  }

  render () {
    return (
      <Modal open={this.state.Modalopen}>
        <Modal.Header>Success!</Modal.Header>
        <Modal.Content image>
          <Image wrapped size='medium' src='http://semantic-ui.com/images/avatar2/large/rachel.png' />
          <Modal.Description>
            <Header>Thank you</Header>
            <p>bla bla bla</p>
            <Button color='green' onClick={this.closeModal} inverted>
              <Icon name='checkmark' /> Got it
            </Button>
          </Modal.Description>
        </Modal.Content>
      </Modal>
    );
  }
}

可能是什么导致了这个问题？谢谢。

Answer 1

在我的例子中，它正常创建模态框。

这里是测试代码(ES5/webpack) :

[index.html]

<!DOCTYPE html>
<html lang="ko-KR">
<head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>
</head>
<body>
    <div id="wrap"></div>
    <script src="dist/app.js"></script>
</body>
</html>

[app.jsx]

var React = require('react');
var ReactDOM = require('react-dom');
var Semantic = require('semantic-ui-react');
var Button = Semantic.Button;
var Header = Semantic.Modal.Header;
var Image = Semantic.Image;
var Modal = Semantic.Modal;
var Icon = Semantic.Icon;

var IndexPage = React.createClass({
    getInitialState : function() {
        return {
            Modalopen: true,
            Orders: "",
            //urlparameter: qs.parse(location.search.replace(/^.*?\=/, ''))
        }
    },

    closeModal: function() {
        this.setState({Modalopen: false})
        //this.props.history.pushState(null, "/")
    },

    render : function () {
        return (
            <Modal open={this.state.Modalopen}>
                <Modal.Header>Success!</Modal.Header>
                <Modal.Content image>
                    <Image wrapped size='medium' src='http://semantic-ui.com/images/avatar2/large/rachel.png' />
                    <Modal.Description>
                        <Header>Thank you</Header>
                        <p>bla bla bla</p>
                        <Button color='green' inverted>
                            <Icon name='checkmark' /> Got it
                        </Button>
                    </Modal.Description>
                </Modal.Content>
            </Modal>
        );
    }
});

ReactDOM.render(<IndexPage/>, document.getElementById('wrap'));

Image of Result by the upper code

如果您不断收到错误消息，请使用 Codepen 添加 html/js 文件的更多详细信息，以根据您的情况进行测试。

Answer 2

我今天在尝试创建自定义 'fullscreen' 模态时遇到了同样的问题。

这条线给我们添麻烦了...

https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Modal/Modal.js#L255

如果模态 height 大于或等于 window.innerHeight，它会添加 class scrolling ，它带有一堆样式。

setPositionAndClassNames 然后似乎在第 271 行被递归调用，这可能导致奇怪的循环行为。

脏修复

我将 margin-bottom: 1px 添加到我的模态以确保它比 window.innerHeight 小一点。

长期解决方案

我会在 semantic-ui-react 中打开一个 PR，看看他们怎么说...

更新

我在 https://github.com/Semantic-Org/Semantic-UI-React/pull/3024 上打开了一个 PR，其中包含建议的修复方法。

更新

已合并，现在是 Semantic UI React 的一部分。

语义反应模态奇怪的高度行为

Semantic React Modal weird height behavior

javascript

css

reactjs

semantic-ui

脏修复

长期解决方案

更新

更新