Ultra-easy Modal Window Plugin - jQuery Modalize
File Size: | 5.52 KB |
---|---|
Views Total: | 326 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Modalize is a plain and straightforward jQuery modal window plugin that is easy to implement via anchor links and HTML data
attributes.
Whether you're building a new website or updating an existing project, jQuery Modalize is a helpful plugin that can be used to display additional information or interact with users without navigating away from the current page.
How to use it:
1. Download the plugin and place the modalize.js
script after loading the latest jQuery library.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/js/modalize.js"></script>
2. Create an anchor link to toggle the modal window and define your own modal content using the following HTML data
attributes.
<a href="#" class="modal-button" data-modal-title="My Modal Title" data-modal-text="Text to show in modal"> Open Modal </a>
3. Initialize the Modalize plugin on document ready.
$(document).ready(function() { $('.modal-button').on('click', $(this).modalize); });
4. Apply CSS styles to the modal window.
/* modal window */ .modal { position: absolute; width: 50%; max-width: 800px; height: auto; border: solid thin #eee; border-radius: 10px; padding: 20px; opacity: 1; box-shadow: 5px 5px 5px 1px #777; } /* background overlay */ .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; background-color: #222; } /* close button */ .close-button { position: absolute; top: 5px; right: 0px; width: 20px; height: 20px; content: 'X'; cursor: pointer; } /* modal title */ .modal-title { /* ... */ } /* modal content */ .modal-text { /* ... */ }
This awesome jQuery plugin is developed by arquilca. For more Advanced Usages, please check the demo page or visit the official website.