How To Make Modal Popup Draggable In Pure JavaScript | jsModal

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.{
  content: 'HTML CONTENT HERE'

4. If you want to load an external file in the modal window via AJAX requests.{
  ajaxContent: 'ajax-example.html'

5. Customize the modal window with the following options.{
  width: 'auto',
  height: 'auto',
  lock: false,
  hideClose: false,
  draggable: false,
  closeAfter: 0,
  openCallback: false,
  closeCallback: false,
  hideOverlay: false


content:Define content here. e.g. content: ‘Hello World!’,
ajaxContent:Define the URL to the content (cross-domain requests not supported yet).
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.

draggable ajax-enabled modal window, jsModal Plugin/Github

See Demo And Download

Official Website(samuelbetio): Click Here

This superior jQuery/javascript plugin is developed by samuelbetio. For extra advanced usage, please go to the official website.

Related Posts


A Simple Bootstrap 4 Steps Plugin | Bootstrap Steps

Bootstrap Steps plugin is simple and supports mobile clients. The CSS extension for Bootstrap 4 allows you to create a responsive, SEO-friendly step bar to showcase the…


Simple and Lightweight Vertical 3-Dot Context Menu

The 3-dot Context Menu allows for a simple and lightweight implementation to show 3 vertical dots allowing the user to click and show a menu. Below is…


Highly Customizable Sticky Element Plugin With JavaScript | HC-Sticky

Sticky JS Library is a JavaScript library that makes any element on your page visible while scrolling. Dependency is free, but it also works as a jQuery…


A Web-Based Spreadsheet In Pure JavaScript | x-spreadsheet

JavaScript Spreadsheet Library – x-spreadsheet is a pure JS library used to create an Excel-style spreadsheet and Google Sheets for the web. Features Undo & Redo Paint…


Create a Horizontal Timeline Using jQuery plugin | timeline.js

jQuery Timeline, you can easily create two types of horizontal timelines with this plugin. Timeline.js helps you display horizontal timelines, browser, responsive bar, and point/line style from…


Bootstrap 5 Support for Internet Explorer 11 | BS5 IE

Bootstrap 5 drops support for Internet Explorer 11, but you can add support again simply by adding a CSS file and a few multiple JavaScript packages. What…