Aquí está el problema que tengo cuando uso el modal React de la interfaz de usuario semántica : hago lo que se muestra en su sitio web, pero extrañamente mi Modal se mueve como en este GIF de lo que está sucediendo .
No tengo idea de cómo arreglar esto. Aquí está mi código:
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> ); } }¿Qué podría estar causando este problema? Gracias.
Tuve el mismo problema hoy al intentar crear un modal personalizado de 'pantalla completa'.
Esta es la línea que nos causa problemas...
https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Modal/Modal.js#L255
Si la height modal es mayor o igual que window.innerHeight , agrega la clase de scrolling que viene con un montón de estilos.
setPositionAndClassNames luego parece ser llamado recursivamente en la línea 271, lo que probablemente esté causando el extraño comportamiento de bucle.
Estoy agregando margin-bottom: 1px a mi modal para asegurarme de que sea un poquito menos que window.innerHeight .
Abriré un PR en semantic-ui-react y veré lo que dicen...
Tengo un PR abierto en https://github.com/Semantic-Org/Semantic-UI-React/pull/3024 con una solución sugerida.
Eso se fusionó y ahora forma parte de Semantic UI React.
En mi caso, crea Modal normalmente.
Aquí está el código de prueba (ES5/webpack):
[índice.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>[aplicación.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'));Imagen de Resultado por el código superior
Si recibe el error continuamente, agregue los archivos html/js con más detalle con Codepen para probar su situación.
