Minimal Animated jQuery Modal Dialog Plugin - BriefPopUp
File Size: | 4.63 KB |
---|---|
Views Total: | 1312 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
BriefPopUp is a really simple jQuery popup plugin which lets you create minimal clean modal windows from any inline content within the document. The plugin currently comes with 2 subtle animations: fade, fadeAndPop and is easy to customize via CSS.
How to use it:
1. Load the jQuery BriefPopUp plugin's stylesheet in the head section of the html document.
<link href="css/popUpCss.css" rel="stylesheet">
2. Load jQuery JavaScript library and the jQuery BriefPopUp plugin's script at the end of the document so the page loads faster.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="js/jquery.popup.js"></script>
3. Create the content to be embedded into the modal window.
<div id="myModal" class="briefPopUp-modal"> <h1>Modal Title</h1> <p>Modal Content Here</p> <a class="close-briefPopUp-modal">×</a> </div>
4. Create a trigger element to toggle the modal window. You can pass the plugin's options using HTML data
attributes as follows:
- data-briefPopUp-id: modal ID
- data-animation: 'fade', 'fadeAndPop' or 'none'
- data-animationspeed: animation speed in milliseconds
- data-closeonbackgroundclick: whether to close the modal by clicking on the background overlay
<a href="#" class="briefPopUp" data-briefPopUp-id="myModal" > Click me </a> <a href="#" class="briefPopUp" data-briefPopUp-id="myModal" data-animation="fade" > Click me </a> <a href="#" class="briefPopUp" data-briefPopUp-id="myModal" data-animationspeed="3000"> Click me </a> <input id="Button" type="button" class="briefPopUp" value="closeonbackgroundclick = false" data-briefPopUp-id="myModal" data-closeonbackgroundclick="false" data-animation="none">
This awesome jQuery plugin is developed by SeedQiGit. For more Advanced Usages, please check the demo page or visit the official website.