Draggable And Resizable Modal Popup - myOwnDialog.js

myOwnDialog.js is a simple, fast jQuery modal popup plugin for creating draggable and resizable dialog boxes with a background overlay.

It comes with an Autoclose functionality which allows the dialog to auto-dismiss itself after a certain timeout. Great for Android Toaster-style notification popups.

How to use it:

1. Load the jQuery myOwnDialog.js plugin's files into your document when needed.

<link rel="stylesheet" href="/path/to/css/modalbox.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/modalbox.min.js"></script>

2. Insert your content into a modal container.

<div id="myDialog">
  Your Dialog/Modal Content Here
</div>

3. Initialize the plugin on the modal container.

$("#myDialog").myOwnDialog({
  // options here
});

4. Show the modal when needed.

$("#myDialog").myOwnDialog("open");

5. Add a title to the modal.

$("#myDialog").myOwnDialog({
  title: "Modal Title"
});

6. Auto dismiss the modal after 3 seconds. Default: false (disable).

$("#myDialog").myOwnDialog({
  autoClose: "3000"
});

7. Enable/disable draggable & resizable functionalities. Default: true.

$("#myDialog").myOwnDialog({
  movable: true,
  resizable: true
});

8. Determine whether to close the modal on click/tap outside. Default: false.

$("#myDialog").myOwnDialog({
  touchOutsideForClose: true
});

9. Set the height/width of the modal.

$("#myDialog").myOwnDialog({
  width: "300",
  height: "200"
});

10. Set the position of the modal when opened. Default: 'empty'.

$("#myDialog").myOwnDialog({
  pos_x: "50",
  pos_y: "50"
});

11. Customize the background color of the modal. Default: 'white'.

$("#myDialog").myOwnDialog({
  bg_color: '#ccc'
});

12. Determine whether to hide the horizontal & vertical scrollbars in the modal. Default: 'hidden'.

$("#myDialog").myOwnDialog({
  body_overflow_x: "scroll",
  body_overflow_y: "scroll"
});

Changelog:

2020-08-04

• v1.2.1: Some minor issues fixed

---

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