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>
  <!-- ... -->
</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 () {
  $('#proto-dialog').protoDialog('open');
});

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

$('#proto-dialog').protoDialog({
  '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.