Minimal Clean jQuery Modal Window Plugin - FrankieModalBox

FrankieModalBox is a lightweight and fast jQuery modal plugin which makes it easy to display an overlay popup box with or without close button. Licensed under the MIT and GPL

How to use it:

1. Download the plugin and then include the JavaScript file jquery.frankieModalBox.min.js after jQuery.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="jquery.frankieModalBox.min.js"></script>

2. Put your content in the modal popup as this.

<div id="myModal">
  <h2>Modal Title</h2>
  <p>Modal content here</p>
</div>

3. Create a trigger link to toggle the modal popup. Note that the href value must match the modal's container ID.

<a href="#myModal" id="demo">Launch</a>

4. Initialize the modal plugin and done.

$('#demo').frankieModal();

5. Add a close button to the modal popup:

<div id="myModal">
  <div id="close-button"></div>
  <h2>Modal Title</h2>
  <p>Modal content here</p>
</div>

$('#demo').frankieModal({
  closeButton:'#close-button'
});

#close-button {
  width: 12px;
  height: 12px;
  margin: -5px 0 0 545px;
  position: absolute;
  cursor: pointer;
  opacity: 1;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAZklEQVQoz5WQQQrAIAwExyeICJEeCh76/yf20tAgWWkXBEl2ErLwqgONXAZUFvP1vJaYvVcBCnCEYoRsqZtPyaBTmXeQNEdoJpukTGxoX8xzB2VpyPQKMMSBK9RjY4g0HOr8UPHPDVJDCheP4tTFAAAAAElFTkSuQmCC);
}

---

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