Custom Fullscreen Dialog Popup Plugin For jQuery - protoDialog

File Size: 6.61 KB
Views Total: 1167
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Custom Fullscreen Dialog Popup Plugin For jQuery - protoDialog

protoDialog is a simple, flexible jQuery plugin used to help you create fullscreen, responsive dialog boxes with custom actions & callbacks on the web page.

How to use it:

1. Include references to jQuery library, proto-dialog.css and jquery.proto-dialog.js on the html page.

<script src="/path/to/jquery.min.js"></script>
<link rel="stylesheet" href="/path/to/proto-dialog.css">
<script src="/path/to/jquery.proto-dialog.js"></script>

2. Add html content to the dialog popup.

<div id="proto-dialog">
  <div id="proto-dialog-header">Header</div>
  <div id="proto-dialog-content">Content</div>
  <div id="proto-dialog-footer">Footer</div>
  <!-- ... -->

3. Create a button to toggle the dialog popup.

<button id="open-dialog" type="button">Open Dialog</button>

4. Initialize the plugin.

$('#open-dialog').on('click', function () {

5. Add a custom action button to the dialog popup.

  'actions': {
    'custom': {
      'label': 'Custom',
      'class': 'btn btn-warning',
      'on': {
          'click': function(e) {
            // do something
          'mouseover': function(e) {
            // do something

6. Full plugin options.

// add custom action buttons here
actions: {

// callback functions
onInit: function($dialog) {
onOpen: function($dialog) {
onOpened: function($dialog) {
onClose: function($dialog) {
onClosed: function($dialog) {
onResize: function($dialog) {
onAction: function(_action, _event, $dialog) {

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