jQuery Plugin For Facebook Style Dialog Box - FBDialog

FBDialog is a very simple jQuery plugin to create a custom Facebook style dialog box that has popup animations and callback events support.

How to use it:

1. Include the latest version of jQuery library on the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Include the jQuery FBDialog plugin's javascript and CSS files on the web page. Make sure to have jQuery library loaded.

<script type="text/javascript" src="fbdialog.min.js"></script>
<link rel="stylesheet" href="fbdialog.css" />

3. Create a link or button to trigger a dialog box.

<button class="show-dialog"> Show Dialog </button>

4. Create the Html content for the dialog.

<div class="demo"> Your content goes here <br/>
<a href="#" id="fbclose">Close this dialog</a> </div>

5. Initialize the plugin with customization options.

<script type="text/javascript">
$(function() {
$(".show-dialog").click(function() {
$(".demo").fbdialog({
title: "Facebook Dialog", // Dialog title text
cancel: "Cancel", // Cancel button text
okay: "Okay", // Okay button text
okaybutton: true, // show the ok button
cancelbutton: true, // Show the cancel button
buttons: true, // Show the buttons
opacity: 0.4, // The opacity value for the overlay div, from 0.0 - 1.0
dialogtop: ""}, // Position of dialog from top of page  0px - 99999px
function(callback){
// do something
});
   
$(document).on("click", "#fbclose", function() { 
$(".demo").fbdialog({close: true});
});
});
</script>

---

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