Minimal Dialog Popup Plugin - jQuery Sanity.Libs.Dialog

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

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>

3. Create a dialog toggle button pointing to the dialog container.

<button sanity_dialog-trigger="example">
  Launch The Dialog

4. Enable the toggle button to open the dialog popup.


5. You can also toggle the dialog popup via URL.

6. Style the dialog popup in the CSS.

.sanity_dialog__content { 
  max-width: 80%; 
  /* more styles here */



  • hotfix for dialog events


  • hot fix for apple safari


  • class rework + popstate fix + new lib files


  • 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.