JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="sm_open" data-modal="exampleAdvanced" data-effect="pushup" data-icons="is_right" data-header-type="detached">Modal (w/Detached Header and Right Icon Menu)</button>

    
    <div class="slim_modal" id="exampleAdvanced">
      <div class="sm_content">
        <div class="sm_header">Hi. I'm a Header.</div>

        <div class="sm_content_inner_wrap">
          <div class="sm_area_top">
            <h3>Example Modal Content
							<span>...for this CSS Demo</span>
						</h3>
          </div>
          <div class="sm_area_bottom">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt nihil asperiores recusandae </p>
          </div>
          <div class="sm_close sm_close_button">CLOSE</div>
        </div>
      </div>
    </div>

CSS

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  /* you need to set this to assign to the main element a min height of 100% */
  height: 100%;
}

body {
  font-family: "Montserrat", sans-serif;
  color: #404040;
  margin: 0 auto;
  background: #a9cd99;
}


.slim_modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 2;
  display: none;
  font-size: 1em;
  -webkit-transition: background 0.5s ease 0.06s;
  -moz-transition: background 0.5s ease 0.06s;
  -ms-transition: background 0.5s ease 0.06s;
  -o-transition: background 0.5s ease 0.06s;
  transition: background 0.5s ease 0.06s;
}
.slim_modal.none {
  background: rgba(10, 10, 10, 0);
}
.slim_modal.red {
  background: rgba(228, 30, 58, 0.8);
}
.slim_modal.tan {
  background: rgba(202, 180, 75, 0.8);
}
.slim_modal.green {
  background: rgba(111, 171, 85, 0.8);
}
.slim_modal .sm_content {
  background: whitesmoke;
  text-align: center;
  max-width: 800px;
}
@media only screen and (min-width: 320px) {
  .slim_modal .sm_content {
    padding: 0px;
    width: 100%;
    height: 100%;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
  }
}
@media only screen and (min-width: 414px) {
  .slim_modal .sm_content {
    padding: 0px;
    width: 100%;
    height: 100%;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
  }
}
@media only...

JavaScript

$(document).ready(function() {

    $('.sm_open').on('click', function(){
        var modal = $(this).attr('data-modal');
        var modaloverlaycolor = $(this).attr('data-overlay');
        var modaleffect = $(this).attr('data-effect');
        var modalheader = $(this).attr('data-header');
        var modalheadertype = $(this).attr('data-header-type');
        var modalcontent = $(this).attr('data-content');
        var modaliconside = $(this).attr('data-icons');
        var modalwrappercolor = $(this).attr('data-wrapper-color');

        $('#' + modal).addClass(modaloverlaycolor);
        $('#' + modal + ' .sm_content').addClass(modaleffect);
        $('#' + modal + ' .sm_content .sm_header').html(modalheader);
        $('#' + modal + ' .sm_content .sm_header').addClass(modalheadertype);
        $('#' + modal + ' .sm_content .sm_area_all').html(modalcontent);
        $('#' + modal + ' .sm_icon_menu').addClass(modaliconside);
        $('#' + modal + ' .sm_content').addClass(modalwrappercolor);
        $('#' + modal).fadeIn().css("display", "flex");
        setTimeout(function(){
            $('#'+modal + ' .sm_content').addClass('show');
        }, 400);        
    });

    $('.sm_close').on('click', function(){
        var $modal = $(this).parents('.slim_modal');
        closeModal($modal);  
    });

    $('.slim_modal').on('click', function(e) {
	  if (e.target !== this)
	    return;
		var $modal = $(this);
    	closeModal($modal);
	});
    
    function closeModal($modal) {
    	$modal.find('.sm_content').removeClass('show');
        setTimeout(function(){
        	$modal.removeClass('red green tan none');
        	$modal.find('.sm_content').removeClass('red green tan');
        	$modal.find('.sm_icon_menu').removeClass('is_right is_left');
        	$modal.find('.sm_header').removeClass('detached');
            $modal.fadeOut();
        }, 400);
    }
  });