Minimal Animated jQuery Modal Dialog Plugin - BriefPopUp

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">&#215;</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.