Tiny Feature-rich jQuery Dialog Popup Plugin - ZLDialog

ZLDialog is a lightweight yet powerful jQuery plugin which makes it easy to create message / alert / confirm / prompt / preview dialog popups with lots of customization options.

Features:

• Great for replacing the default JavaScript dialog windows.
• Supports loading external data source.
• Allows previewing any HTML elements like a tooltip.
• Drag and drop support without jQuery UI.

How to use it:

1. To get started, you need to load jQuery library and the jQuery ZLDialog plugin's CSS and JavaScript files in the html page.

<link href="css/ZLDialog.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/ZLDialog.js"></script>

2. Create a basic alert dialog using $.dialog.alert() method.

$.dialog.alert({
  content:"Alert Message"
});

3. Create a basic message dialog that auto dismisses after a timeout.

$.dialog.message({
  content:"Message here"
});

4. Create a basic preview dialog.

$("#demo-dialog-preview").preview({
  content:"http://lorempixel.com/400/200",
  type:"img",
  direction:"bottom"
});

5. Load an external URL into the dialog.

$.dialog.open({
  title:"jQuery",
  inFrame:true,
  size:{
    width:1024,
    height:768
  },
  url:"https://www.jqueryscript.net/"
});

6. Default parameters for $.dialog() method

// $.dialog(option)
$.dialog({

  // dialog title
  title: 'Dialog Title',

  // dialog content
  content: null,

  // hides the close button
  hideX: false,

  // an array of dialog buttons:
  // text: null
  // callback: null
  buttons: null,

  // auto close timeout in ms
  timeout: null,

  // {width: null, height: null}
  size: null,

  // enable drag and drop
  drag: true,

  // locks the background
  lock: true,

  // onShow callback
  showBack: null,

  // onClose callback
  closeBack: null,

  // padding
  padding: null,

})

7. Default parameters for $.dialog.message() method

// $.dialog.message(option)
$.dialog.message({

  // dialog content
  content: null,

  // auto close timeout in ms
  timeout: null,

  // locks the background
  lock: true,

  // onShow callback
  showBack: null,

  // onClose callback
  closeBack: null,

})

8. Default parameters for $.dialog.alert() method

// $.dialog.alert(option)
$.dialog.alert({

  // dialog title
  title: 'Dialog Title',

  // dialog content
  content: null,

  // hides the close button
  hideX: false,

  // auto close timeout in ms
  timeout: null,

  // {width: null, height: null}
  size: null,

  // enable drag and drop
  drag: true,

  // locks the background
  lock: true,

  // onShow callback
  showBack: null,

  // onClose callback
  closeBack: null,

  // padding
  padding: null,

})

9. Default parameters for $.dialog.confirm() method

// $.dialog.confirm(option,yesCallback,noCallback)
$.dialog.confirm({

  // dialog title
  title: 'Dialog Title',

  // dialog content
  content: null,

  // hides the close button
  hideX: false,

  // auto close timeout in ms
  timeout: null,

  // {width: null, height: null}
  size: null,

  // enable drag and drop
  drag: true,

  // locks the background
  lock: true,

  // onShow callback
  showBack: null,

  // onClose callback
  closeBack: null,

  // padding
  padding: null,

})

10. Default parameters for $.dialog.open() method

// $.dialog.open(option)
$.dialog.open({

  // URL to display in the dialog
  url: null,

  // displays in iframe
  inFrame: false,

  // dialog title
  title: 'Dialog Title',

  // dialog content
  content: null,

  // hides the close button
  hideX: false,

  // auto close timeout in ms
  timeout: null,

  // {width: null, height: null}
  size: null,

  // enable drag and drop
  drag: true,

  // locks the background
  lock: true,

  // onShow callback
  showBack: null,

  // onClose callback
  closeBack: null,

  // padding
  padding: null,

})

11. Default parameters for $.dialog.preview() method

// $.dialog.preview(option)
$.dialog.preview({

  // content type. e.g. img
  type: null,

  // dialog content
  content: null,

  // 'top', 'right', 'bottom', 'left'
  direction: 'right'

  // auto close timeout in ms
  timeout: null,

  // {width: null, height: null}
  size: null,

  // onShow callback
  showBack: null,

  // onClose callback
  closeBack: null,

  // padding
  padding: null,

})

Change log:

2016-03-25

• v1.4.5

---

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