ReactJs Modal Using Javascript and CSS
ReactJs Modal Using Javascript and CSS
如何使用body end标记附加reactjs模态窗口,以使用body标记设置模态定位绝对值。
下面是添加到另一个组件中的示例。
<div className="modal">
<p>Model Pop-up <button onClick={this.handleClick}>here</button></p>
<div id="js-modal-inner" className="modal">
<div className="modal__content js-dialog">
<a className="modal__close" onClick={this.handleClose}>×</a>
<header className="modal__header">
<h2 className="modal__title">Split Ticket:</h2>
</header>
<div className="modal__content--inner">
{this.props.children}
</div>
</div>
</div>
<div className="modal__overlay js-fade"></div>
</div>
这通常被称为react中的"层"。看看这个小提琴
/** @jsx React.DOM */
var ReactLayeredComponentMixin = {
componentWillUnmount: function() {
this._unrenderLayer();
document.body.removeChild(this._target);
},
componentDidUpdate: function() {
this._renderLayer();
},
componentDidMount: function() {
// Appending to the body is easier than managing the z-index of everything on the page.
// It's also better for accessibility and makes stacking a snap (since components will stack
// in mount order).
this._target = document.createElement('div');
document.body.appendChild(this._target);
this._renderLayer();
},
_renderLayer: function() {
// By calling this method in componentDidMount() and componentDidUpdate(), you're effectively
// creating a "wormhole" that funnels React's hierarchical updates through to a DOM node on an
// entirely different part of the page.
React.renderComponent(this.renderLayer(), this._target);
},
_unrenderLayer: function() {
React.unmountComponentAtNode(this._target);
}
};
var Modal = React.createClass({
killClick: function(e) {
// clicks on the content shouldn't close the modal
e.stopPropagation();
},
handleBackdropClick: function() {
// when you click the background, the user is requesting that the modal gets closed.
// note that the modal has no say over whether it actually gets closed. the owner of the
// modal owns the state. this just "asks" to be closed.
this.props.onRequestClose();
},
render: function() {
return this.transferPropsTo(
<div className="ModalBackdrop" onClick={this.handleBackdropClick}>
<div className="ModalContent" onClick={this.killClick}>
{this.props.children}
</div>
</div>
);
}
});
var ModalLink = React.createClass({
mixins: [ReactLayeredComponentMixin],
handleClick: function() {
this.setState({shown: !this.state.shown});
},
getInitialState: function() {
return {shown: false, ticks: 0, modalShown: false};
},
componentDidMount: function() {
setInterval(this.tick, 1000);
},
tick: function() {
this.setState({ticks: this.state.ticks + 1});
},
renderLayer: function() {
if (!this.state.shown) {
return <span />;
}
return (
<Modal onRequestClose={this.handleClick}>
<h1>Hello!</h1>
Look at these sweet reactive updates: {this.state.ticks}
</Modal>
);
},
render: function() {
return <a href="javascript:;" role="button" onClick={this.handleClick}>Click to toggle modal</a>;
}
});
React.renderComponent(<ModalLink />, document.body);
相关文章:
- CSS选择器与And操作组合'&&'
- javascript and css firefox issue
- lightbox, css and javascript
- Combine HTML5, CSS and JS
- Combining HTML5, CSS and JS
- Javascript and Css: Height does not change
- javascript and css styling
- jQuery and css issue
- CSS animation and Jquery2
- CSS animation and Jquery
- ReactJs Modal Using Javascript and CSS
- Javascript and CSS if statement
- jQuery and css()
- jQuery按类搜索AND css值不等于foo
- AngularJS and CSS Transitions
- Grails and css / javascript libraries
- Javascript event and css
- jQuery and CSS :before
- SyntaxError with .js and .css - ASP.NET MVC 5
- Javascript: location.replace and CSS-classes