Semantic React Modal seltsame Höhe Verhalten

Hier ist das Problem, das ich bei der Verwendung der semantic UI React modal habe: Ich mache, wie auf ihrer Website gezeigt, aber seltsam bewegt sich mein Modal wie in this GIF of what is happening.Semantic React Modal seltsame Höhe Verhalten

Ich habe keine Ahnung, wie das zu beheben ist. Hier ist mein Code:

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> 
    ); 
    } 
}

Was könnte dieses Problem verursachen? Vielen Dank.

Quelle

2017-01-03 Marco

Ich habe dieses Problem auch gesehen. Es scheint für mich zu passieren, wenn der modale Inhalt gerade in der Höhe ist, wo er scrollbar wäre. Wenn ich den HTML-Code in den Dev-Tools anschaue, kann ich sehen, dass eine Scroll- und Dimmer-Klasse wiederholt aus dem HTML-Body-Element hinzugefügt und entfernt wird (in einer Schleife stecken bleibt). Ich kann das beheben, indem ich den Inhalt und damit die Höhe dem Modal hinzufüge (obwohl dies keine befriedigende Lösung ist). Dies sieht wie ein Fehler in der semantischen Benutzeroberfläche aus. –

In meinem Fall, es erstellt normalerweise Modal. Hier

ist der Testcode (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

Wenn Sie den Fehler kontinuierlich erhalten, Bitte fügen Sie die html/js-Dateien detaillierter mit Codepen hinzu, um Ihre Situation zu testen.

Quelle

2017-01-04 05:24:34

Semantic React Modal seltsame Höhe Verhalten

Antwort

Verwandte Themen