Basic Cross-browser jQuery Modal Dialog Plugin - xDialog

xDialog is an ultra-light jQuery plugin for displaying a modal window & dialog popup on the webpage, with (or without) a fullscreen background overlay. Easy to customize using your own CSS styles.

How to use it:

1. Include the jQuery xDialog plugin after you have jQuery JavaScript library installed in the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.xDialog.js"></script> 

2. Create a basic modal dialog on the webpage using $.dialog() method.

$.dialog({
  'DialogTit' : 'Modal Title',
  'DialogCon' : 'Modal Content'
});

3. Apply your own modal styles.

.xDialog {
  position: fixed;
  _position: absolute;
  z-index: 1000;
}

.DialogCon {
  border: 8px solid #34526F;
  background: #fff;
  text-align: center;
  border-radius:5px;
}

.DialogTit {
  line-height: 60px;
  font-size: 15px;
  background: #0E76A8;
  color: #fff;
  position: relative;
}

.DialogArea {
  font-size: 20px;
  line-height: 200px;
}

.DialogClose {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 20px;
  color: #dedede;
}

.DialogMask {
  width: 100%;
  height: 100%;
  position: fixed;
  _position: absolute;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.6;
  filter: alpha(opacity=60);
}

4. Display a fullscreen background overlay.

$.dialog({
  'isLock' : true,
  'DialogTit' : 'Modal Title',
  'DialogCon' : 'Modal Content'
});

5. Specify the width and height of the modal dialog.

$.dialog({
  'width'  : 450,
  'height' : 320,
  'DialogTit' : 'Modal Title',
  'DialogCon' : 'Modal Content'
});

---

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