A simple modal overlay written in JavaScript for modern browsers. The main goal is to keep it small, clean and without third-party library dependencies.
======= Demos:
- Small: < 2kb after compression. < 0.7kb after compression and gzip.
- No third-party library dependencies.
- Simple: Nothing but a modal.
- Customization: Use your own CSS to customize the look and feel.
- Easy to use: Just include the script in your page.
- Bootstrap: Use the Bootstrap CSS and HTML markup to get the modal Bootstraped.
IE10+, Chrome, Firefox, Safari, Opera. Has also been tested on Safari (iOS 7.1), IE10 (Windows Phone 8), Chrome 35 (Android 4.4.4).
NO COPYRIGHTS. NO LICENSES. DO WHAT YOU LIKE.
<link rel="stylesheet" href="modal.css">
<script src="modal.js"></script>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalTitle" aria-describedby="modal-content" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-content">
<h3 id="myModalTitle">Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
The modal is triggered through the markup using the data-modal attribute.
<button data-modal="#myModal">Open modal</button>
- data-modal: Activate the modal using the specified selector.
- data-dismiss: Close the modal.
Please feel free to contact me.