Open a modal pop-up on button click and close it with a button inside the pop-up.

by Imri Paloja

HTML

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>

<div class="container">
  <button id="open">Open Modal</button>

  <div
    id="modal"
    style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5);"
  >
    <div id="modal-content" class=".button">
      <h2>Modal Popup</h2>
      <button onclick="closeModal()">Close</button>
    </div>
  </div>

  <script>
    document.getElementById('open').addEventListener('click', () => {
        document.getElementById('modal').style.display = 'block';
    });

    function closeModal() {
        document.getElementById('modal').style.display = 'none';
    }
  </script>
</div>

CSS

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  color: #454545;

  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;

  line-height: 2em;
}
.container {
  margin-top: 5% !important;
}

#modal #modal-content,
#modal-content {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  color: #454545;
}

#modal-content {
  background: #f9f9f9;
  border: 1px solid #cccccc;
  box-shadow: 1px 1px 1px #454545;
  border-radius: 5px;
  margin: 100px auto;
  padding: 20px;
  width: 300px;
}