Resizable & Draggable Dialog In Pure JavaScript

Category: Javascript , Modal & Popup | September 16, 2019
Author:ZulNs
Views Total:13,001 views
Official Page:Go to website
Last Update:September 16, 2019
License:MIT

Preview:

Resizable & Draggable Dialog In Pure JavaScript

Description:

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>
  <button>Close</button>
  <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>
  <div class="buttonpane">
    <div class="buttonset">
      <button>OK</button>
      <button>Cancel</button>
    </div>
  </div>
</div>

Enable a button to toggle the dialog.

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

Changelog:

09/16/2019

  • JS cleanup

09/14/2019

  • 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

    Reply

Leave a Reply