Handle & Manage jQuery UI Dialog Windows - Window.Framework

The jQuery UI Window Framework makes it easier to create jQuery UI dialog windows with a simple API that can be moved, resized and closed programmatically.

How to use it:

1. Include jQuery, jQuery UI and a jQuery UI theme of your choice on the web page.

<link rel="stylesheet" href="/path/to/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Download and include the jQuery Window.Framework plugin after jQuery & jQuery UI.

<script src="jquery.ui.window.framework.js"></script>

3. Insert the dialog content into a DIV container.

<div id="demo">
  Dialog content here
  ...
</div>

4. Create and display a jQuery UI dialog window on the webpage. All possible parameters:

• id: container ID
• title: dialog title
• height: height of dialog
• width: width of dialog
• modal: modal mode
• autoOpen: auto open
• resizeable: is resizeable

// openWindow( id, title, height, width, modal, autoOpen, resizeable );
openWindow( 'demo', 'Dialog Title', 350, 480, true, true, true );

5. Close the dialog window manually.

// hideWindow(containerID);
hideWindow('demo');

6. Show the dialog window again.

// showWindow(containerID);
showWindow('demo');

7. Adjust the height and width of the dialog window

// changeDialogSize(containerID, Height, Width);
changeDialogSize('demo', 450, 600);

---

This awesome jQuery plugin is developed by ravenmyst. For more Advanced Usages, please check the demo page or visit the official website.