Resizable & Draggable Dialog In Pure JavaScript

Category: Javascript , Modal & Popup | September 16, 2019
Views Total:13,888 views
Official Page:Go to website
Last Update:September 16, 2019


Resizable & Draggable Dialog In Pure JavaScript


A vanilla JavaScript library to create a draggable & resizable dialog popup without any frameworks or libraries (e.g. jQuery UI).

To move, drag from the title bar of the dialog box.

To resize, drag from any edge or any corner of the dialog box.

How to use it:

Import the stylesheet draggable-resizable-dialog.css and JavaScript draggable-resizable-dialog.js into the document.

<link rel="stylesheet" href="draggable-resizable-dialog.css">
<script src="draggable-resizable-dialog.js"></script>

Create the HTML for the dialog.

<div class="dialog" style="width:480px; height:240px;">
  <div class="titlebar">Dialog Title...</div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <div class="buttonpane">
    <div class="buttonset">

Enable a button to toggle the dialog.

<button id="show-dialog" onclick="_showDialog();">Show Dialog</button>



  • JS cleanup


  • use values from css instead of constants

You Might Be Interested In:

One thought on “Resizable & Draggable Dialog In Pure JavaScript

  1. Praveen J

    Good article, In that I used input tag but it is not working any suggestions


Leave a Reply