Draggable Dialog Plugin with jQuery and jQuery UI - dAlerta

dAlerta is a minimal jQuery & jQuery UI plugin for creating draggable, resizable and themeable dialog boxes on your web page. The plugin currently comes with 5 different dialog types: information, alert, error, confirm and cancel.

How to use it:

1. Include a jQuery UI theme and the jQuery dAlerta plugin's stylesheet in the header.

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/lightness/jquery-ui.css">
<link rel="stylesheet" href="css/jdialog.css">

2. Include jQuery library, jQuery UI and the jQuery dAlerta plugin's script in the footer.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="js/jdialog.js"></script>

3. Display your message into a dialog box via Javascript as follows.

// dAlerta(TITLE,MESSAGE,TYPE,WIDTH,Height);

dAlerta("Title","Your Message","ok",'400','300');

4. Available options.

modal: true, // modal mode
resizable: false, // enable resizable
width: vWidth,
minHeight: vHeight,
title: preTitulo + titulo, // prefix+title
buttons: {
  "Ok":{
    text: "Ok",
    id: "btdalerta_ok",
    class: "btn",
    click: function() {
      $(this).dialog("close");
    }
  }
}

Change log:

2014-09-20

• Improve responsive.

---

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