JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<button data-modal-open="#modal">Open modal</button>

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mauris ipsum, elementum eu mattis sed, lobortis id lorem. Aliquam erat volutpat. Phasellus dui leo, tincidunt quis venenatis eget, ornare et dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc non nibh nec tortor pellentesque ornare in nec lectus. Aliquam cursus mi risus, ut iaculis felis interdum eget. Morbi in leo ex.

Nulla vitae quam vel ligula blandit pretium sed rutrum urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc venenatis tellus mi, et maximus sapien finibus a. Nullam ac enim ac nisl placerat sodales sed nec tortor. Phasellus non est sed sapien sodales semper. Nullam vitae justo libero. Integer vitae nisl sit amet ante ultricies pellentesque nec vitae nulla.

Morbi blandit, mauris sit amet cursus tincidunt, est nisl consequat libero, nec pulvinar leo mauris eu leo. Donec molestie rutrum neque in iaculis. Sed in leo dapibus, mattis magna at, viverra mi. Aenean viverra erat suscipit, mattis quam posuere, aliquet turpis. Fusce laoreet rhoncus dapibus. Duis ut nibh purus. Aenean eget ultricies ex. Etiam auctor tincidunt vestibulum. Phasellus vehicula dui non tortor vestibulum ullamcorper. Nam elementum lectus vel augue scelerisque luctus. Vivamus lobortis risus enim, nec elementum purus suscipit a. Aenean dictum, ipsum posuere facilisis eleifend, quam purus dapibus mi, sit amet dignissim ligula erat sed tellus. Quisque venenatis vulputate sem eleifend dapibus.

Duis accumsan libero ut est molestie tincidunt. Ut nec metus venenatis, tincidunt ligula vitae, iaculis lorem. Praesent pharetra egestas leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis aliquam felis, ac sollicitudin diam pharetra vitae. Cras semper tempus felis in semper. Donec consectetur nisl orci, sed pharetra magna mollis quis. Cras cursus fermentum finibus....

SCSS

button {
  padding: 20px;
  background: #ffc300;
  color: #1d1d1d;
  font-weight: bold;
  border: none;
  border-radius: 10px;
}

body {
  position: relative;
}

.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  top:0;
  left:0;
  z-index: 1000;
  &.open {
    display: flex;
  }
  
  .content {
    width: 600px;
    height: 400px;
    background: #ccc;
    border-radius: 10px;
    box-shadow: 0px 0px 100px 0px rgba(0,0,0,0.24);
    position: relative;
    z-index: 1002;
    
    .close {
      padding: 20px;
      width: 100px;
      cursor:pointer;
    }
    
  }
  
  .backdrop {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: 1001;
  }
  
}

JavaScript

jQuery(document).ready(function($) {
  $('[data-modal-open]').on('click', function() {
    openModal($(this).attr('data-modal-open'))
  });

  /*   $('[data-modal-close]').on('click', function(){
      closeModal($(this));
    }); */


  function openModal($modal) {
    $($modal).addClass('open');
  }

  /*   function closeModal($closeTrigger) {
      $($closeTrigger).parents('.modal').removeClass('open');
    } */

  if ($('.modal').hasClass('open')) {
    $(document).on('click', function(evt) {
      if (!$(evt.target).is('.content')) {
        $(".modal").hide();
      }
    })
  }

});