2kb Window Modal Component In jQuery | simpleModal

How to make use of it:

1. Add modal header, body, and footer to the modal window.

<simple-modal id="newModal">
  <div class="simple-modal-header">
    <h3>Modal Header</h3>
    <div class="simple-close"></div>
  </div>
  <div class="simple-modal-body">
    <p>Modal Body</p>
  </div>
  <div class="simple-modal-footer">
    <p>Modal Footer</p>
  </div>
</simple-modal>

2. Create a set off aspect to toggle the modal window.

<button simple-modal="newModal">
  Toggle
</button>

3. Load jQuery library and the straightforwardModal plugin’s files within the doc.

<link rel="stylesheet" href="dist/simpleModal.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="dist/simpleModal.js"></script>

4. Override the default styles of the modal window.

.simple-modal-bg{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #00000030;
  z-index: 9999;
}
simple-modal{
  display: none;
  position:fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  background-color:#FFFFFF;
  border-radius: 0.2em;
  z-index: 99999;
}
.simple-modal-header{
  padding:1rem;
  display:flex;
  justify-content:space-between;
  align-items: center;
  border-bottom:1px solid #E6E6E6;
}
.simple-modal-body{
  padding:1rem;
}
.simple-modal-footer{
  border-top:1px solid #E6E6E6;
  padding:1rem;
}
simple-modal.simple-active{
  display:block;
}
.simple-close::after {
  content: 'x';
  color: #00000080;
  font-weight: 700;
  cursor: pointer;
}
@media (max-width:970px){
  simple-modal{
    width:90%;
  }
}
@media (max-width:450px){
  simple-modal{
    margin:0;
    height:100%;
    width:100%;
  }
}

1kb Modal Component, simple Jquery Modal Plugin/Github

See Demo And Download