Simple jQuery Draggable Dialog Box Plugin - Honey Dialog

Honey Dialog is a very simple jQuery plugin to create a draggable dialog box without jQuery UI drag & drop component. Fully customizable via CSS.

How to use it:

1. Create a button in your document to open a dialog box.

<input type="button" value="Click me" class="button">

2. Include the jQuery javascript library and the jQuery honey dialog plugin at the bottom of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="honey-dialog.js"></script>

3. Initialize the plugin by binding the click() function on the toggle button and set the message for the dialog box.

jQuery(function($){
$('input.button').click(function(){
    $('body').dialog('Your Message Goes Here');
});
});

4. Tweak the CSS styles or add your own styles as you wish.

/*** Shadow ovely ***/

div.shadow {
  width: 100%;
  background: #666;
  opacity: 0.8;
  filter: alpha(opacity=80);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
}

/*** Main style ***/

div.dialog {
  min-width: 380px;
  min-height: 100px;
  background: #fff;
  border: solid 8px #666;
  position: absolute;
  top: 25%;
  left: 33%;
  z-index: 10001;
}

/*** Close button ***/

div.dialog_close {
  background: url('close.png');
  width: 30px;
  height: 30px;
  position: absolute;
  top: -18px;
  right: -20px;
  cursor: pointer;
}

/*** button ***/

a.button {
  text-decoration: none;
  background: #999;
  color: #FFFFFF;
  height: 25px;
  padding: 5px 15px;
  text-align: center;
  border: none;
  font-weight: bold;
  opacity: 0.6;
  filter: alpha(opacity=60);
  cursor: pointer;
}

a.cancel_button { background: #ff4500; }

a.confirm_button { background: #008000; }

/*** Notice ****/

.notice {
  margin-top: 15px;
  margin-left: 20px;
  margin-right: 20px;
}

.notice .msg {
  font-size: 15px;
  font-weight: bold;
}

.notice .buttons { margin-top: 20px; }

---

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