Cross-browser resizable and draggable modal dialog window popup for JS (JavaScript) and HTML

Drag, resize and select API

Some time ago, when I had more time and dedication, I wrote and thoroughly tested in commercial environments a mouse-transform API to enable dragging and resizing of HTML elements on a page. It was mostly intended to be used for the modal dialog box script covered by this article. However, it saw other uses, such as dragging a selection rectangle around items, as seen in the screenshot below. Here you can see the dialog window hosting the file manager developed for this website. The rectangular selection seen around the item is powered by this API.

File manager hosted inside modal JavaScript dialog box

Browser compatibility

The script was tested to work with IE6-11, Firefox, Chrome, Safari and Opera.

Using the JS modal dialog window

The complete source code is attached at the bottom of this article. There are three components to the JS dialog box: HTML markup, CSS and the JS script. There are also a couple of images included for the default theme, but these are not required, as the styling can be changed to not use sprites.

To create a dialog box, download the source files and include them in the project. Make sure all the references are correct.

The modal window needs to be initialized once with the markup that will define its structure. The default markup is provided in the sample page that can be found together with the source files.

Once the markup is set, modal popups can be called like this:

dialogWindow.createDialog('My dialog', document.getElementById('content'), null, null, null, true, true);

Where the arguments are:

createDialog(titleText, content, onCloseCallback, height, width, useMoveOutline, useResizeOutline) 

titleText - text to appear in the title of the window

content - is what goes inside the dialog. This can be an element from the page or an HTML string.

onCloseCallback - callback function to execute when the dialog is closed. When called, the content is passed to it as the argument: onCloseCallback(content).

height - height of the window. Leave null to auto-calculate, based on the size of the content.

width - width of the window. Leave null to auto-calculate, based on the size of the content.

useMoveOutline - determines whether the window can be dragged around directly, or an outline should be created in drag mode.

useResizeOutline - determines whether to create an outline in resize mode, rather than animate window resizing directly.

To close the dialog box, call: dialogWindow.closeTopDialog();

That's all there is to it!

Download here:

Source code for JS modal dialog window popup.






Information Error Confirmation required