jQuery Plugin To Create Static or Dynamic Modal Windows - dialog.js

dialog.js is a lightweight and easy-to-use jQuery plugin used to create animated modal dialog popups that supports both static and dynamic html content.

How to use it:

1. Make sure to include the jQuery dialog.js script after you have jQuery library installed in your webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="jquery-dialog.js"></script> 

2. Create a modal dialog that loads static content on your webpage.

• data-dialog: Target modal ID
• data-dialog-clone: Open dialog with cloned content
• data-dialog-top: Specify top position. Centered if "auto".
• data-dialog-width: Specify the width of modal

<button data-dialog="#modal">Lanuch</button>

<div style="display: none;">
  <div id="modal">
    <h1>Modal Title</h1>
    <p>Modal Content</p>
    <button data-dialog-close>Close</button>
  </div>
</div>

3. Create a modal dialog that loads dynamic content in the JavaScript.

$("#button-dialog").on("click", function(){
  $("<div>")
  .append('Modal Content Here')
  .children()
  .dialog({
    // options here
  });
});

4. Add your custom CSS styles to the modal dialog.

.dialogs { display: none; }

.dialog {
  background-color: #fff;
  padding: 1em;
  border-radius: .5em;
  overflow: hidden;
}

.dialog button {
  border: none;
  background-color: #333;
  color: #fff;
  padding: .5em 1em;
  font-size: 1em;
  border-radius: .3em;
  cursor: pointer;
}

.dialog button:hover { background-color: #444; }

.dialog-footer {
  background-color: #eee;
  margin: -1em;
  margin-top: 1em;
  text-align: center;
  padding: 1em;
}

5. Full plugin options.

// CSS z-index property
zIndex: 99,

// CSS class of modal
className: "dialog",

// CSS class of modal container
containerClassName: "dialog-container",

// Width of modal
width: "60%",

// Clone the content or not
clone: false,

// animation speed
duration: 300,

// background color of overlay
backgroundColor: "rgba(0, 0, 0, .9)",

// position
top: "auto"

6. Events.

$.dialog.on("close", function(){
    console.log("dialog closed");
});

$.dialog.on("open", function(){
    console.log("dialog opened");
});

Change log:

v0.1.1 (2015-09-04)

• bugfix

---

This awesome jQuery plugin is developed by mach3. For more Advanced Usages, please check the demo page or visit the official website.