JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<div class="modal">
            <div class="modal-overlay modal-toggle"></div>
            <div class="modal-wrapper modal-transition">
                <div class="modal-header">
                    <button class="modal-close modal-toggle">
                        <svg class="icon-close icon" viewBox="0 0 32 32">
                            <use xlink:href="#icon-close"></use>
                        </svg>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="modhead">
                        <img src="img/terms.png" alt="" class="termsimg">
                        <p>Head of modal</p>
                    </div>
                    <div class="modal-content">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
 incididunt ut labore et dolore magna aliqua.
                        <br><br>
                        <button class="modal-close2 modal-toggle">
                            
                               х
                          
                        </button>
                    </div>
                </div>
            </div>
        </div>

CSS

/* Icons */
 
.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  fill: currentcolor;
}
/* 1. Ensure this sits above everything when visible */
 
.modal {
  position: absolute;
  z-index: 10000;
    /* 1 */
  top: 0;
  left: 0;
  visibility:visible;
  width: 800px;
  height: 100%;
  height: 300px;
}
 
.modal.is-visible {
  visibility: visible;
}
 
.modal-overlay {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: hsla(0, 0%, 0%, 0.5);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 0s linear 0.3s, opacity 0.3s;
  transition: visibility 0s linear 0.3s, opacity 0.3s;
}
 
.modal.is-visible .modal-overlay {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
 
.modal-wrapper {
  height: 85% !important;
  display: block;
  overflow: scroll;
  overflow-x: hidden;
  position: fixed;
  z-index: 9999;
  margin: 0 auto;
  width: 960px;
  top: 4em;
  left: 50%;
    /* Negative half of height. */
  margin-left: -480px;
  background-color: #fff;
  box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
}
 
.modal-transition {
  -webkit-transition: all 0.3s 0.12s;
  transition: all 0.3s 0.12s;
  -webkit-transform: translateY(-10%);
  transform: translateY(-10%);
}
 
.modal.is-visible .modal-transition {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
 
.modal-content {
  padding-top: 1em;
  padding-right: 34px;
  margin: 0 auto;
  padding-left: 34px;
  text-align: left;
  letter-spacing: 0.8px;
  max-width: 867px;
}
 
button.modal-close.modal-toggle {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1em;
  color: #aaa;
  background: none;
  border: 0;
}
 
.modal-close2 {
  top: 0;
  right: 0;
  padding: 1em;
  color: #aaa;
  background: none;
  border: 0;
}
 
.modal-close:hover {
  color: #777;
}
 
.modhead {
  width: 354px;
  margin: 0 auto;
  height: 104px;
}
 
.modhead p {
  float: right;
 ...

JavaScript

$('.modal-toggle').on("click", function() {
    $(".modal").css({display:'none'});
    document.cookie="done=true; expire=3000000";
});
if(document.cookie.indexOf("done")>=0)
    $(".window").css({display:'none'});