Customizable Static Modal Window Plugin - jQuery Veil

This is a jQuery modal window plugin somewhat based on the Zurb jQuery Reveal Plugin which is deprecated, no longer is developed or supported and does not work with the the latest version of jQuery.

jQuery Veil has updated the basic concept and added some new features:

• Set the Height of the dialog
• Set the Width of the dialog
• Set the source of the optional iframe
• Set the top position of the dialog
• Set the left position of the dialog
• New 'slide' animation
• New frosted glass background

How to use it:

1. Include the veil.css in the head, and the jquery.veil.js after jQuery but before we close the body tag.

<link rel="stylesheet" href="veil.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.veil.js"></script>

2. Create the content to be displayed in the modal window.

<div id="myModal" class="veil-modal-container">
  Any Modal Content Here
  <div class="veil-footer">
    <input type="button" value="Close" class="veil-close">
  </div>
</div>

3. Create a modal trigger element and pass the options via data attributes (see the option list below).

<a href="#" 
   data-veil-id="myModal" 
   class="veil" 
   data-veil-OPTIONNAME="VALUE"
   id="demo">
   Launch
</a>

4. Enable the trigger element to launch the modal window.

$(function(){
  $('#demo').veil();
});

5. All possible plugin options.

$(function(){
  $('#demo').veil({

    // fade, pop, slide, none
    animation         : 'pop',          

    // close class
    closeclass        : 'close-veil',   

    // animation speed
    animationspeed    : 300,            

    // opacity of the modal background
    opacity           : 50,             

    // width of the dialog
    width             : 600,            

    // height of the dialog
    height            : 400,            

    // closes on background click
    closeonbgclick    : false,          

    // color of the modal background
    bgcolor           : null,           

    // ID that blurs the background
    blurid            : null,           

    // source file for the optional iframe
    source            : null,           

    // position of the top of the dialog
    top               : null,           

    // position of the left side of the dialog
    left              : null,           

    // Title of the dialog
    title             : null

  });
});

6. Callback functions.

$(function(){
  $('#demo').veil({

    // on Close callback function
    onClose           : null,           

    // on Open callback function
    onOpen            : null            

  });
});

---

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