How To Make Modal Popup Draggable In Pure JavaScript

jsModal.js is a vanilla JavaScript modal plugin for creating Ajax-enabled draggable modal windows with minimal effort.

how to make modal popup draggable, modal draggable jquery, draggable modal, bootstrap modal draggable resizable, drag and drop div using jquery, make modal draggable javascript

How to make use of it:

1. Include the main JavaScript file “jsModal.js” on the web page.

<script src="js/jsmodal.js"></script>

2. Include a CSS theme of your choice on the webpage.

<!-- dark theme -->
<link href="css/jsmodal-dark.css" rel="stylesheet">
<!-- light theme -->
<link href="css/jsmodal-light.css" rel="stylesheet">

3. Display a basic modal window on the screen.

Modal.open({
  content: 'HTML CONTENT HERE'
});

4. If you want to load an external file in the modal window via AJAX requests.

Modal.open({
  ajaxContent: 'ajax-example.html'
});

5. Customize the modal window with the following options.

Modal.open({
  width: 'auto',
  height: 'auto',
  lock: false,
  hideClose: false,
  draggable: false,
  closeAfter: 0,
  openCallback: false,
  closeCallback: false,
  hideOverlay: false
});

Parameters

content:	Define content here. e.g. content: ‘Hello World!’,
ajaxContent:	Define the URL to the content (cross-domain requests not supported yet).
width: height:	The width and height of the modal. If both or either of them is left blank, the default will be ‘auto’. Make sure to include the format, i.e. ‘100px’ or ‘100em’ or ‘100%’ etc.
draggable:	Set this to true in order to make the Modal draggable. (touch support yet to be implemented).
closeAfter:	Define the number in seconds. The modal will close after the provided time.
hideClose:	Set this to true in order to hide the close graphic. The modal will still be escapable via the ESC key or clicking the overlay.
lock:	Set this to true in order to make the modal unescapable and hides the close graphic. You will have to set a close trigger within the modal (or alternatively, closeAfter:). To set a close trigger, call: Modal.close();
openCallback:	Allows you to pass a function to be run when the modal has been opened.
closeCallback:	Allows you to pass a function to be run when upon closing of the modal.
hideOverlay:	Disables the overlay if you set this to false. Note: If you don’t intend on using this, you don’t have to include it at all when opening a modal.