2kb Window Modal Component In jQuery | simpleModal

Simple Jquery Modal is a simple and extremely lightweight jQuery window component (less than 1-2 KB) that downloads content directly from within the document.

open modal popup using jquery on button click, jquery modal popup example, javascript modal popup

How to make use of it:

1. Add a 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 the 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>

Read More – An Unstyled jQuery Plugin for Modal Windows | modality

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

Read More – 

Tiny Simple Modal Window In Vanilla JavaScript | modalzinha.js
Animated Clean Modal Window Using jQuery Plugin | Vintage Popup

1kb Modal Component, simple Jquery Modal Plugin/Github


See Demo And Download

Official Website(Meraj): Click Here

This superior jQuery/javascript plugin is developed by Meraj. For extra Advanced Usage, please go to the official website.

Share