This time I will share jQuery Plugin and tutorial about Basic Modal Window With Inline Content – jquery.modal.js, hope it will help you in programming stack.
An ultra simple jQuery plugin for showing a responsive, CSS3 animated modal window with inline contents from a DIV element.
How to use it:
1. Link to necessary JavaScript and CSS files.
1 |
<link rel="stylesheet" href="css/modal.css"> |
3 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
4 |
crossorigin="anonymous"> |
6 |
<script src="js/jquery.modal.js"></script> |
2. Insert the modal content into a DIV container.
2 |
<div class="modal-content"> |
3 |
<span class="close">X</span> |
3. Create a trigger button to toggle the modal window.
1 |
<button class="modalbtn">open modal</button> |
4. Enable the trigger button to toggle the modal window. Done.
1 |
$(document).ready(function(){ |
3 |
$(".modalbtn").modal(); |
5. Customize the styles of the modal window.
10 |
background-color: rgb(0,0,0); |
11 |
background-color: rgba(0,0,0,0.8); |
This awesome jQuery plugin is developed by karolinaklein. For more Advanced Usages, please check the demo page or visit the official website.
