Draggable & Maximizable Dialog Window Library – jsWindow

Preview:

Description:

jsWindow is a feature-rich popup library to create draggable, minimizable/maximizable, resizable popup windows for alert/confirm dialogs and message boxes on the screen.

How to use it:

1. Load the required JavaScript and CSS files in the document.

<!-- Core Stylesheet -->
<link rel="stylesheet" href="/path/to/window.css" />
<!-- Icons -->
<link rel="stylesheet" href="/path/to/icons.css" />
<!-- Core JavaScript -->
<script src="/path/toScripts/windows.js"></script>

2. Create a basic dialog window.

var wnd = new jsWindow();

wnd.title = "jsWindow "
wnd.container.setPosition(250, 50);
wnd.container.setSize(400, 150);

wnd.content = '<label>A dynamically created window.</label>';

wnd.show();

3. Create an alert dialog box.

jsMessager.alert("A dynamically created messagebox.", "messagebox");

4. Create a confirm dialog box.

var messager = jsMessager.confirm("A dynamically created confirm. Press {" + jsMessager.texts.yes + "} to execute callback.", "confirm", function () {
  jsMessager.alert("callback executed!", "confirmed");
});

messager.addEventListener("js.return", function(ev) {
  appendLogText("returned value of confirm: " + ev.parameter);
});

5. Create a login form displayed in the dialog box.

var wnd_login = new jsMessager();
  
wnd_login.title = "login";
wnd_login.addButton("login", "login", false);
wnd_login.addButton("cancel", "cancel", true);
wnd_login.textContainer.innerHTML = '<div style="display: block; padding: 10px;"><p style="margin-bottom: 0;">Username</p><input class="form-control" id="inp_user" /><p style="margin-bottom: 0;">Password</p><input class="form-control" type="password" id="inp_password" /></div>'


wnd_login.addEventListener("js.return", function(ev) {
  var value = ev.parameter;

  if (value === "login") {
    var user = wnd_login.body.container.querySelector("#inp_user").value;
    var password = wnd_login.body.container.querySelector("#inp_password").value;
  
    jsMessager.alert('user: ' + user + " | password: " + password);
  
    if (user === "user1234" && password === "jsWindow") { wnd_login.close(); } else {
      jsMessager.alert("credentials are incorrect!");
    }
  } else { wnd_login.close(); }
});

wnd_login.show();