content logo

React Popups:

Simple React Popup Code with Scrollbar

If you need to display long text for the user in the pop-up section, you can use this code. This code shows a button in the middle and top of the page. This button has a black border. Clicking on this button opens a pop-up that contains long text and therefore has a pop-up scroll. This pop-up can be suitable for the rules section.

#

Scrolling React Popup

#

Javascript Popup Code

#

Simple Popup Code

#

CSS Scrollable Popup

<!-- This script got from frontendfreecode.com -->
<div id="app"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup.hidden {
  display: none;
}
.popup .black-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.popup .content-section-wrapper {
  position: relative;
  background: #fff;
  width: 500px;
  max-height: 100%;
  padding: 25px;
  z-index: 2;
}
.popup .content-section-wrapper .close-button {
  position: absolute;
  top: 0;
  right: -50px;
  width: 50px;
  height: 50px;
  background: #302c2c;
  font-weight: 600;
  color: #fff;
  font-size: 22px;
  padding: 3px 0 0 0;
  text-decoration: none;
}
.popup .content-section {
  min-height: 100px;
  max-height: 70vh;
  overflow-y: scroll;
}
.popup .content-section h2 {
  margin: 0;
  padding: 5px 0 15px 0;
}
.popup .content-section p {
  font-size: 17px;
  margin: 0;
}
.aligner {
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
}
@media screen and (max-width: 700px) {
  .popup .content-section-wrapper .close-button {
    right: 0;
  }
}
class Popup extends React.Component {
  constructor(props) {
    super(props);
    this.close = this.close.bind(this);
  }
  close() {
    this.props.onClose();
  }
  render() {
    const { head, body } = this.props;
    return /*#__PURE__*/(
      React.createElement("div", { className: "popup" }, /*#__PURE__*/
      React.createElement("div", { className: "black-section", onClick: this.close }), /*#__PURE__*/
      React.createElement("div", { className: "content-section-wrapper" }, /*#__PURE__*/
      React.createElement("a", { href: "javascript:;", className: "close-button aligner adaptLink", onClick: this.close }, "X"), /*#__PURE__*/
      React.createElement("div", { className: "content-section" }, /*#__PURE__*/
      React.createElement("div", { className: "head-block" },
      head), /*#__PURE__*/
      React.createElement("div", { className: "body-block" }, /*#__PURE__*/
      React.createElement("div", { className: "body-block-inner" },
      body))))));
  }}
class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visiblePopup: true };
    this.openPopup = this.openPopup.bind(this);
    this.closePopup = this.closePopup.bind(this);
  }
  openPopup() {
    this.setState({
      visiblePopup: true });
  }
  closePopup() {
    this.setState({
      visiblePopup: false });
  }
  render() {
    const { visiblePopup } = this.state;
    let popupTitle = /*#__PURE__*/React.createElement("h2", null, "React Popup");
    let popupBody = /*#__PURE__*/React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos repudiandae fugiat voluptatum maxime dolorem accusamus eius placeat expedita accusantium obcaecati. Consequatur earum asperiores minus necessitatibus atque odit ut tenetur at cumque placeat magni quis reprehenderit numquam mollitia corrupti temporibus vel recusandae commodi autem fugiat animi ea, accusamus dignissimos iure! Culpa fuga quae unde repudiandae consequuntur quaerat officia doloremque facere id eaque, obcaecati enim animi consequatur distinctio architecto nulla praesentium. Delectus doloribus id quasi officia cupiditate nobis a quibusdam, molestiae maiores reprehenderit odio optio, provident, qui eligendi fugit possimus autem ab enim repellat quidem eum. Vel, voluptas enim hic nisi nobis molestias consequuntur rem, aspernatur dolorum architecto incidunt maxime nam officia aperiam delectus inventore eveniet. Placeat distinctio vero ea ex alias sit voluptas possimus inventore eligendi dolorum cupiditate fugiat, fuga quis quisquam, voluptatem dignissimos debitis tempore officia similique deserunt omnis deleniti! Non est doloremque, voluptatum iure quasi sunt quae! Molestias sapiente vero temporibus accusantium nihil omnis numquam voluptatibus, pariatur, iure accusamus fuga adipisci commodi explicabo ipsum iusto repellendus beatae libero a architecto eius veniam voluptatum perferendis aliquid tempore. Laboriosam a maiores vero dolor quod delectus expedita saepe eius quibusdam pariatur! Eius, eveniet. Ad numquam ullam necessitatibus harum, vitae tenetur repellendus facere quisquam quas, laboriosam eaque ea quasi, ducimus nulla et odio quod quos voluptas neque quaerat sed? Hic dicta enim itaque facere. Corporis aliquid laudantium inventore animi recusandae blanditiis aliquam quas obcaecati aspernatur ea velit excepturi, reiciendis reprehenderit dignissimos. Debitis vero minus, iusto hic itaque aliquam tempora nesciunt sapiente harum. Tempora temporibus accusantium quisquam a dolorem sit sed iste, doloribus quo ullam alias non nesciunt ab aspernatur voluptas beatae facere sequi blanditiis ipsa eaque repudiandae praesentium nisi! Tenetur incidunt ratione modi accusamus exercitationem dolores aut doloremque temporibus repudiandae odit aliquam aperiam, repellat saepe minus magni rem tempora. Maxime animi nesciunt sit!");
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("p", { style: { textAlign: 'center' } }, /*#__PURE__*/
      React.createElement("a", { href: "javascript:;", onClick: this.openPopup, style: { textDecoration: 'none', color: '#000', border: '1px solid', borderRadius: '5px', padding: '8px' } }, "Open Pop-Up")),
      visiblePopup ? /*#__PURE__*/React.createElement(Popup, { head: popupTitle, body: popupBody, onClose: this.closePopup }) : ""));
  }}
ReactDOM.render( /*#__PURE__*/
React.createElement(List, null),
document.getElementById("app"));
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js'></script>
<style>
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup.hidden {
  display: none;
}
.popup .black-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.popup .content-section-wrapper {
  position: relative;
  background: #fff;
  width: 500px;
  max-height: 100%;
  padding: 25px;
  z-index: 2;
}
.popup .content-section-wrapper .close-button {
  position: absolute;
  top: 0;
  right: -50px;
  width: 50px;
  height: 50px;
  background: #302c2c;
  font-weight: 600;
  color: #fff;
  font-size: 22px;
  padding: 3px 0 0 0;
  text-decoration: none;
}
.popup .content-section {
  min-height: 100px;
  max-height: 70vh;
  overflow-y: scroll;
}
.popup .content-section h2 {
  margin: 0;
  padding: 5px 0 15px 0;
}
.popup .content-section p {
  font-size: 17px;
  margin: 0;
}
.aligner {
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
}
@media screen and (max-width: 700px) {
  .popup .content-section-wrapper .close-button {
    right: 0;
  }
}
</style>

</head>
<body>
<div id="app"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
class Popup extends React.Component {
  constructor(props) {
    super(props);
    this.close = this.close.bind(this);
  }
  close() {
    this.props.onClose();
  }
  render() {
    const { head, body } = this.props;
    return /*#__PURE__*/(
      React.createElement("div", { className: "popup" }, /*#__PURE__*/
      React.createElement("div", { className: "black-section", onClick: this.close }), /*#__PURE__*/
      React.createElement("div", { className: "content-section-wrapper" }, /*#__PURE__*/
      React.createElement("a", { href: "javascript:;", className: "close-button aligner adaptLink", onClick: this.close }, "X"), /*#__PURE__*/
      React.createElement("div", { className: "content-section" }, /*#__PURE__*/
      React.createElement("div", { className: "head-block" },
      head), /*#__PURE__*/
      React.createElement("div", { className: "body-block" }, /*#__PURE__*/
      React.createElement("div", { className: "body-block-inner" },
      body))))));
  }}
class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visiblePopup: true };
    this.openPopup = this.openPopup.bind(this);
    this.closePopup = this.closePopup.bind(this);
  }
  openPopup() {
    this.setState({
      visiblePopup: true });
  }
  closePopup() {
    this.setState({
      visiblePopup: false });
  }
  render() {
    const { visiblePopup } = this.state;
    let popupTitle = /*#__PURE__*/React.createElement("h2", null, "React Popup");
    let popupBody = /*#__PURE__*/React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos repudiandae fugiat voluptatum maxime dolorem accusamus eius placeat expedita accusantium obcaecati. Consequatur earum asperiores minus necessitatibus atque odit ut tenetur at cumque placeat magni quis reprehenderit numquam mollitia corrupti temporibus vel recusandae commodi autem fugiat animi ea, accusamus dignissimos iure! Culpa fuga quae unde repudiandae consequuntur quaerat officia doloremque facere id eaque, obcaecati enim animi consequatur distinctio architecto nulla praesentium. Delectus doloribus id quasi officia cupiditate nobis a quibusdam, molestiae maiores reprehenderit odio optio, provident, qui eligendi fugit possimus autem ab enim repellat quidem eum. Vel, voluptas enim hic nisi nobis molestias consequuntur rem, aspernatur dolorum architecto incidunt maxime nam officia aperiam delectus inventore eveniet. Placeat distinctio vero ea ex alias sit voluptas possimus inventore eligendi dolorum cupiditate fugiat, fuga quis quisquam, voluptatem dignissimos debitis tempore officia similique deserunt omnis deleniti! Non est doloremque, voluptatum iure quasi sunt quae! Molestias sapiente vero temporibus accusantium nihil omnis numquam voluptatibus, pariatur, iure accusamus fuga adipisci commodi explicabo ipsum iusto repellendus beatae libero a architecto eius veniam voluptatum perferendis aliquid tempore. Laboriosam a maiores vero dolor quod delectus expedita saepe eius quibusdam pariatur! Eius, eveniet. Ad numquam ullam necessitatibus harum, vitae tenetur repellendus facere quisquam quas, laboriosam eaque ea quasi, ducimus nulla et odio quod quos voluptas neque quaerat sed? Hic dicta enim itaque facere. Corporis aliquid laudantium inventore animi recusandae blanditiis aliquam quas obcaecati aspernatur ea velit excepturi, reiciendis reprehenderit dignissimos. Debitis vero minus, iusto hic itaque aliquam tempora nesciunt sapiente harum. Tempora temporibus accusantium quisquam a dolorem sit sed iste, doloribus quo ullam alias non nesciunt ab aspernatur voluptas beatae facere sequi blanditiis ipsa eaque repudiandae praesentium nisi! Tenetur incidunt ratione modi accusamus exercitationem dolores aut doloremque temporibus repudiandae odit aliquam aperiam, repellat saepe minus magni rem tempora. Maxime animi nesciunt sit!");
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("p", { style: { textAlign: 'center' } }, /*#__PURE__*/
      React.createElement("a", { href: "javascript:;", onClick: this.openPopup, style: { textDecoration: 'none', color: '#000', border: '1px solid', borderRadius: '5px', padding: '8px' } }, "Open Pop-Up")),
      visiblePopup ? /*#__PURE__*/React.createElement(Popup, { head: popupTitle, body: popupBody, onClose: this.closePopup }) : ""));
  }}
ReactDOM.render( /*#__PURE__*/
React.createElement(List, null),
document.getElementById("app"));
</script>

</body>
</html>
Preview