jQuery Plugin To Create Drggable Popup Windows - WM.js

A window manager built with jQuery that allows you create easy-to-style child popup windows with drag'n'drop and maximize/ minimize capabilities.

How to use it:

1. Import jQuery library and the window manager's main JavaScript & CSS files into your html document.

<link rel="styleSheet" href="jquery-wm/main.css">
<script src="jquery.min.js"></script>
<script src="jquery-wm/main.js"></script>

2. The JavaScript to open a basic popup window.

var $w = $().WM('open','https://google.com');

3. Create a blank window with custom html content.

var $w = $().WM('open');
$w.find('.titlebartext').text('text here');
$w.find('.windowcontent').html('here is some content');

4. API methods.

$w.WM('maximize');
$w.WM('minimize');
$w.WM('raise');
$w.WM('close');

5. Override the default CSS to create your own styles.

.window {
  background-color: purple;
  border-width: 4px;
  border-color: yellow;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
  opacity: .2;
}

.windowtitlebar {
  background-color: black;
  color: green;
}

.window.focused {
  background-color: purple;
  border-width: 8px;
  border-color: green;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
  opacity: .9;
}

.window.focused .windowtitlebar {
  background-color: orange;
  color: red;
  text-decoration: blink;
}

.window.focused .windowcontent {
  background-color: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.window .horizbuts * { background-color: yellow; }

---

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