Responsive Modal Window Triggered By Links Or Forms - SI-Modal
| File Size: | 7.05 KB |
|---|---|
| Views Total: | 931 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
SI-Modal is a tiny jQuery plugin to create a responsive, iframe-based modal window triggered by anchor links or forms submit.
Use this plugin to overlay any external content (like pages, text, images, videos, etc) or form results (response after submitting) on the top of the webpage.
How to use it:
1. Add jQuery library together with the SI-Modal plugin's files to the webpage.
<link rel="stylesheet" href="si-modal.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="si-modal.js"></script>
2. Add the CSS class 'modal' to an anchor link that points to an external resource to be embedded into the modal window.
<a href="example.html" class="modal"> Link </a>
3. Or add the CSS class 'modal' to a search form so that the search result will be displayed in the modal window instead.
<form action="/search/" class="search-form modal" name="formsearch"> <input name="keyword" type="text" id="search-keyword" placeholder="e.g. jQuery Slider" /> <button type='submit'>Search</button> </form>
4. Initialize the plugin and you're done.
new SiModal({
// options here
});
5. Customize the trigger class. Default: 'modal'.
new SiModal({
triggerClass: 'custom-trigger'
});
6. Determine whether to allow the user to close the modal by pressing ESC key. Default: true.
new SiModal({
closeOnEscapeKeyPress: false
});
7. Add the following data attributes to your trigger anchor or form element.
- data-modal-close: Use a selector to specify any element(s) in the child modal window that should immediately close the window when clicked on (e.g. a cancel button)
- data-modal-window-class: Add one or more (space-separated) classes that you wish to add to the outer modal window wrapper element. Good for adding alternate size options, e.g. modal_small
8. Event handlers.
- modal-opened: Triggered when a modal window is first opened.
- modal-closed: Triggered any time a modal window is closed.
- modal-saved: Triggered when the content of a modal window is loaded or reloaded and the data-modal-saved attribute is present somewhere on the page (good for triggering an ajax refresh on the parent page after the modal is saved).
- modal-autoclosed: Triggered when a modal window is automatically closed due to the presence of the data-modal-autoclose attribute somewhere on the page.
- modal-close: Trigger a 'modal-close' event on the <body> tag of the parent window to close its modal
Changelog:
2021-05-05
- JS Updated
This awesome jQuery plugin is developed by solutioninnovators. For more Advanced Usages, please check the demo page or visit the official website.
