Resizable & Draggable Dialog In Pure JavaScript

Category: Javascript , Modal & Popup | January 10, 2019
Author: ZulNs
Views Total: 311
Official Page: Go to website
Last Update: January 10, 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>

You Might Be Interested In:


Leave a Reply