Add jQuery Simple Draggable Dialog & Modal Plugin

jQuery Simple Dialog is a simple and lightweight jQuery plugin for creating customizable and draggable popups for alerts, dialogs, and modal windows.

draggable dialog javascript, html draggable dialog, draggable popup jquery, dialog material ui, material ui popup, material ui confirmation dialog

How to make use of 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 fundamental dialog and a set off button on the web 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 web page load and apply further types 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 give attention to a selected component inside the dialog.

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

6. Enable the draggable performance 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 occasion 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'));
});

Tiny Draggable Dialog & Modal Plugin, jquery simple dialog Github

jquery-simple-dialog-demo


See Demo And Download

Official Website(kanety): Click Here

This superior jQuery/javascript plugin is developed by kanety. For extra Advanced Usage, please go to the official website.

Share