JSFiddle - React, Tailwind, and code Playground

by Rajan Paneru

HTML

<button onclick="openModel()">Open model</button>
<div class="model-overlay hide">
  <div class="model-container">
    <div class="model">
      <div class="head">I am head</div>
      <div class="body">
        <h1>I am 1</h1>
        <h1>2</h1>
        <h1>3</h1>
        <h1>4</h1>
        <h1>5</h1>

      </div>
      <div class="footer">
        <button onclick="closeModel()">Close</button>
        <button onclick="closeModel()">Save</button>
      </div>
    </div>
  </div>
</div>


<h1>sdfas</h1>
<h1>sdfasdf</h1>
<h1>sdfasd</h1>
<h1>dsfasdf</h1>
<h1>sdf</h1>
<h1>asdf</h1>
<h1>asdf</h1>
<h1>asd</h1>
<h1>f</h1>
<h1>asdf</h1>
<h1>sdfas</h1>
<h1>sdfasdf</h1>
<h1>sdfasd</h1>
<h1>dsfasdf</h1>
<h1>sdf</h1>
<h1>asdf</h1>
<h1>asdf</h1>
<h1>asd</h1>
<h1>f</h1>
<h1>asdf</h1>
<h1>sdfas</h1>
<h1>sdfasdf</h1>
<h1>sdfasd</h1>
<h1>dsfasdf</h1>
<h1>sdf</h1>
<h1>asdf</h1>
<h1>asdf</h1>
<h1>asd</h1>
<h1>f</h1>
<h1>asdf</h1>

CSS

body {
          margin: 0;
          padding: 0;
        }

        .model-overlay {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 2;
          overflow-x: hidden;
          overflow-y: auto;
          background-color: rgba(0, 0, 0, 0.81);
          position: absolute;
          top: 0;
        }

        .model-container .model {
          background-color: white;
          width: 500px;
          margin: 50px auto;
        }

        .model-container .head {
          padding: 20px 20px 5px 20px;

          border-bottom: 1px solid #000;
        }

        .model-container .body {
          padding: 5px 20px;
        }

        .model-container .footer {
          text-align: right;
          padding: 5px 20px 20px 20px;
          border-top: 1px solid #000;
        }

        .hide {
          display: none;
        }

JavaScript

function openModel() {
      document.body.style.overflowY = 'hidden';
      document.querySelector('.model-overlay').classList.remove('hide');
    }

    function closeModel() {
      document.body.style.overflowY = 'auto'
      document.querySelector('.model-overlay').classList.add('hide');
    }