This time I will share jQuery Plugin and tutorial about Minimal Clean jQuery Modal Window Plugin – FrankieModalBox, hope it will help you in programming stack.
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.
1 |
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> |
2 |
<script src="jquery.frankieModalBox.min.js"></script> |
2. Put your content in the modal popup as this.
3 |
<p>Modal content here</p> |
3. Create a trigger link to toggle the modal popup. Note that the href value must match the modal’s container ID.
1 |
<a href="#myModal" id="demo">Launch</a> |
4. Initialize the modal plugin and done.
1 |
$('#demo').frankieModal(); |
5. Add a close button to the modal popup:
2 |
<div id="close-button"></div> |
4 |
<p>Modal content here</p> |
1 |
$('#demo').frankieModal({ |
2 |
closeButton:'#close-button' |
4 |
margin: -5px 0 0 545px; |
8 |
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.
