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