反応のポップアップまたはモーダル構成要素をつくってください

ポップアップは、Webサイトやアプリケーション上のさまざまなサイズや画面の位置にウィンドウとして表示するUIコンポーネントです.我々は、ポップアップ、フォーム、ボックス、画像、ビデオ、テーブルなどのような別の任意のコンポーネントを表示することができます.ここでは、反応のポップアップコンポーネントを作成します.

class Popup extends React.Component {
  render() {
    return (
      <div className='popup'>
        <div className='popup_inner'>
          <h1>{this.props.text}</h1>
        <button onClick={this.props.closePopup}>Close</button>
        </div>
      </div>
    );
  }
}

今、私たちは< popup/>コンポーネントを持っています.我々はまた、提供の詳細、画像、ビデオ、ニュースレターフォームなどのような私たちのポップアップで任意の要素やコンポーネントを追加することができます例えば、ここでは、アプリケーションコンポーネントの< popup/>反応コンポーネントを使用しています.

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      showPopup: false
    };
  }
  togglePopup() {
    this.setState({
      showPopup: !this.state.showPopup
    });
  }
  render() {
    return (
      <div className='app'>
        <button onClick={this.togglePopup.bind(this)}>Show Popup</button>

        {this.state.showPopup ? 
          <Popup
            text='This is React Popup'
            closePopup={this.togglePopup.bind(this)}
          />
          : null
        }
      </div>
    );
  }
};

ポップアップコンポーネント

.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 1rem;
  background-color: rgba(0,0,0, 0.5);
}

.popup_inner {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 25%;
  bottom: 25%;
  margin: auto;
  background: white;
  padding: 1rem;
}

してください共有購読し、あなたのためにもっと書くことを動機に肯定的なフィードバックを与える.
より多くのチュートリアルのために、visit my website .
ありがとう
ハッピーコーディング