JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<!-- Button trigger popup -->
<button type="button" class="btn btn-primary" data-toggle="popup" data-target="#examplepopupCenter">
    Launch demo popup
</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi aut laudantium quae dolorem consequatur, doloremque architecto nemo laborum eum voluptates nulla iusto, magni deserunt, harum unde autem, qui molestiae neque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi aut laudantium quae dolorem consequatur, doloremque architecto nemo laborum eum voluptates nulla iusto, magni deserunt, harum unde autem, qui molestiae neque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi aut laudantium quae dolorem consequatur, doloremque architecto nemo laborum eum voluptates nulla iusto, magni deserunt, harum unde autem, qui molestiae neque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi aut laudantium quae dolorem consequatur, doloremque architecto nemo laborum eum voluptates nulla iusto, magni deserunt, harum unde autem, qui molestiae neque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi aut laudantium quae dolorem consequatur, doloremque architecto nemo laborum eum voluptates nulla iusto, magni deserunt, harum unde autem, qui molestiae neque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi aut laudantium quae dolorem consequatur, doloremque architecto nemo laborum eum voluptates nulla iusto, magni deserunt, harum unde autem, qui molestiae neque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi aut laudantium quae dolorem consequatur, doloremque architecto nemo laborum eum voluptates nulla iusto, magni deserunt, harum unde autem, qui molestiae neque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi aut laudantium quae dolorem consequatur, doloremque architecto nemo laborum eum voluptates nulla iusto, magni deserunt, harum unde autem, qui molestiae...

SASS

body
  overflow-y: scroll;
  
.popup 
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
  z-index: 1072;
  transform: scale(1.01,1.01); 
  transition: transform 300ms ease-in-out;
  &.active
    transform: scale(1,1);
  
.popup-dialog
  max-width: 500px;
  margin: 1.75rem auto;
  
.popup-dialog-centered 
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  min-height: calc(100% - 3.5rem);
  &::before
    height: calc(100vh - 3.5rem);
    display: block;
    content: "";
    
.popup-content
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: .3rem;
  outline: 0;

.popup-header
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem;

.popup-body
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1rem;
  
.popup-footer
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: .3rem;
    border-bottom-left-radius: .3rem;
    &>:not(:last-child) 
      margin-right: .25rem;


/**/
.btn
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
   ...

JavaScript

$('button[data-toggle="popup"]').click(function() {
    var x = $(this).data('target');
    $(x).fadeIn(300).addClass('active');
    $('body').after('<div class="popup-backdrop"></div>');
    $('.popup-backdrop').fadeIn(300);
});

var closepopup = function() {
    $('.popup.active').hide().removeClass('active');
    $('.popup-backdrop').remove();
}

$('.popup .closepopup, .popup').click(closepopup);

$(".popup-content").on("click", function(event) {
    event.stopPropagation();
});