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

See Demo And Download