Minimal Dialog Popup Plugin - jQuery Sanity.Libs.Dialog
File Size: | 17.3 KB |
---|---|
Views Total: | 845 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Sanity.Libs.Dialog is a lightweight (~2kb) jQuery plugin to display any inline content in a minimal clean modal dialog when needed.
Click anywhere outside the dialog or click the close button inside the dialog to dismiss the popup.
How to use it:
1. Import the Stylesheet sanity.libs.dialog.css
and JavaScript sanity.libs.dialog.js
into the HTML file.
<link href="dist/sanity.libs.dialog.css" rel="stylesheet" /> <script src="/path/to/jquery.min.js"></script> <script src="dist/sanity.libs.dialog.js"></script>
2. Insert the dialog content into a container element with the sanity_dialog
attribute:
<div sanity_dialog="example"> <h4>Dialog Title</h4> <p class="lead">Modal Content Here</p> </div>
3. Create a dialog toggle button pointing to the dialog container.
<button sanity_dialog-trigger="example"> Launch The Dialog </button>
4. Enable the toggle button to open the dialog popup.
$(function(){ $('[sanity_dialog]').sanityDialog(); });
5. You can also toggle the dialog popup via URL.
https://your-url.com/#dialog_example
6. Style the dialog popup in the CSS.
.sanity_dialog__content { max-width: 80%; /* more styles here */ }
Changelog:
2020-01-30
- hotfix for dialog events
2020-01-29
- hot fix for apple safari
2020-01-28
- class rework + popstate fix + new lib files
2019-12-25
- Updated styles of close button
This awesome jQuery plugin is developed by IgorBezruchko. For more Advanced Usages, please check the demo page or visit the official website.