Background¶
The jQuery Veil plugin was developed as an alternative to other modal window plugins, and as an update to the reveal plugin that has been deprecated. jQuery Veil has updated the basic concept and added some new features.
Note
New features list:
- 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
- New blurred background
See the example file for more info.
Getting Started¶
To begin, you need to ensure that the stylesheets and the javascript libraries are included in your html file.
Required Libraries¶
Include the required javascript libraries:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/jquery.veil.js"></script>
Define the modal¶
Provide the html code for the modal window:
<div id="modal" class="veil-modal-container">
<img src="img/washington.jpg"/>
<div class="veil-footer">
<input type="button" value="Close" class="btn btn-default veil-close"/>
</div>
</div>