Tiny Draggable Dialog & Modal Plugin - simple-dialog

A simple and lightweight jQuery plugin to create customizable, draggable dialog popups for alerts, confirm dialogs, and modal windows.

How to use it:

1. Load the jquery-simple-dialog.js JavaScript library after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery-simple-dialog.js"></script>

2. Create a basic dialog and a trigger button on the page.

<div id="example" class="dialog">
  <div id="example_title">Dialog Title</div>
  <p>Dialog Content</p>
  <hr>
  <button type="button" id="example_ok">OK</button>
  <button type="button" id="example_cancel">Cancel</button>
</div>

3. Hide the dialog on page load and apply additional styles as follows:

.dialog {
  display: none;
  /* optional CSS styles */
  width: 400px;
  padding: 10px;
}

4. Initialize the dialog.

$('#example').simpleDialog({
  opener: '#example_opener',
  closer: '#example_ok, #example_cancel'
});

5. Automatically set the focus on a specific element within the dialog.

$('#example').simpleDialog({
  opener: '#example_opener',
  closer: '#example_ok, #example_cancel',
  focus: '#basic_ok'
});

6. Enable the draggable functionality on the dialog.

$('#example').simpleDialog({
  opener: '#example_opener',
  closer: '#example_ok, #example_cancel',
  dragger: '#example_title'
});

7. Enable the modal mode.

$('#example').simpleDialog({
  opener: '#example_opener',
  closer: '#example_ok, #example_cancel',
  modal: true
});

8. Available event handlers.

$('#example').simpleDialog({
  opener: '#example_opener',
  closer: '#example_ok, #example_cancel'
}).on('dialog:open', function(e, $elem) {
  console.log('opened by ' + $elem.attr('id'));
}).on('dialog:close', function(e, $elem) {
  console.log('closed by ' + $elem.attr('id'));
});

Changelog:

v0.1.2 (05/17/2021)

• Don't cache parent and modal element.

---

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