1kb Modal Component In jQuery - simpleModal

A simple and extremely lightweight (less than 1kb) jQuery modal window plugin that loads content directly from within the document.

How to use 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 trigger element to toggle the modal window.

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

3. Load jQuery library and the simpleModal plugin's files in the document. Done.

<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%;
  }
}

---

This awesome jQuery plugin is developed by Meraj. For more Advanced Usages, please check the demo page or visit the official website.