Draggable Ajax-enabled Modal Window In Pure JavaScript – jsModal.js

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

How to use it:

Include the main JavaScript file ‘jsModal.js’ on the web page.

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

Include a theme CSS of your choice on the web page.

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

Display a basic modal window on the screen.

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

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

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

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
});