Sliding Fullscreen Modal Plugin For jQuery - FullMod
File Size: | 34.3 KB |
---|---|
Views Total: | 1000 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
FullMod is a small jQuery plugin to create a sliding fullscreen modal window animated with CSS3 transitions.
How to use it:
1. Import jQuery library and the FullMod plugin's files into your html page.
<link rel="stylesheet" href="fullmod.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="fullmod.min.js"></script>
2. Create the modal window on the page.
<div id="myFullMod" class="fullmod"> <div class="fullmod-content"> <!--FullMod Header--> <div class="fullmod-head"> <h2 class="title">This is my title</h2> <div class="buttons"> <a href="#" class="btn-close">×</a> </div> </div> <!--FullMod Body--> <div class="fullmod-body"> <p>This is the content of the modal.</p> </div> </div> </div>
3. Initialize the modal window.
var myFullMod = $('#myFullMod').fullmod();
4. Toggle the modal window.
myFullMod.show();
5. Callback functions.
var myFullMod = $('#myFullMod').fullmod({ onShowing: function (params) { console.log('showing'); }, onShown: function () { console.log('shown'); }, onHiding: function (params) { console.log('hiding'); }, onHidden: function () { console.log('hidden'); } });
This awesome jQuery plugin is developed by OmarMuscatello. For more Advanced Usages, please check the demo page or visit the official website.