jQuery Facebook Dialog Plugin – FBDialog

fbdialogplugin
Today we will learn how to use FBDialog, a jQuery Facebook dialog Plugin.
DemoDownload

It functions just like the one on Facebook and is made to look like the latest Facebook Dialog, using HTML5, CSS3 and jQuery 2.1.0.

Usage

Include the latest jQuery library, the fbdialog.css and the FBDialog plugin.

As a chained jQuery function, you can call the fbdialog() function on a jQuery element and a modal dialog will be displayed using the contents of that element. For example:

Options

Replace options text in the plugin with the option listed below.

The title, cancel button, okay button’s text can be changed. Okay button and cancel button can be removed from dialog. The opacity and dialog top position can be changed using the dialog option.

Below is a list of the plugin options:

Callback functions

Use the callback function to know when the Okay button or Cancel button are clicked.

Example:

Closing the dialog

You can use a id or class for the element selector. Example below:

Use the code below to close the dialog with a class or id. The plugin uses jQuery’s on method instead of click method because the id or class used on the link for closing of the dialog are added after the DOM has loaded.

Inside the on method’s function, simply add the id or class selector of the dialog with the option close: true

Conclusion

A simple jQueryFacebook Dialog plugin. I hope you find this plugin useful.

DemoDownload

Tagged with:

View all contributions by

Website: http://rrpowered.com

Related Articles

Advertisement

Stay connected with us

Add us on Google+

Follow us on Facebook

Follow us on Twitter

Get updates via RSS

Get email updates

FEEDBACK0

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">