/, Social Media/Creating facebook like popup dialog in your web app

Creating facebook like popup dialog in your web app

If you are a Facebook application developer, you are certainly familiar with the dialog tool they provide for you. You can display HTML contents, a HTML block and set callback functions for default buttons. It is really very easy and enjoying to use the dialog component. But what if you want to use it in your local web application? There is no way you can import that component for your web app. So all you have to do is to create one from scratch.

But wait, there are some good people over there who already feel the pain and developed a facebook like dialog component for you. This component comes as a plugin of jQuery and works really cool. You can display static HTML contents as well as load external content via AJAX. You can find this component named “Facebox” by clicking here

Integrating Facebox with your site is easy. Just include the javascript file of jquery and facebox. And add the following script at the end of your page.

<script>
$(document).ready(function(){
$('a[@rel*=facebox]').facebox();
});
</script>

Lets have a look at the following example

1. To load an external page

<a href="http://www.google.com/logos/spring08.gif" rel="facebox">text</a>

2. To display static content

jquery.facebox("Here is some <b>static content</b>");

or

$.facebox("Here is some <b>static content</b>");

Thats it! you got a nice dialog component for your web application.

2010-05-25T22:15:25+00:00 March 20th, 2008|JavaScript, Social Media|1 Comment

About the Author:

One Comment

  1. hanzi July 1, 2009 at 6:59 AM

    How can I make this so that it pops up when my index page finishes loading or while its loading (either way) I just want to display specials before they start browsing the site.

    thanx

Leave A Comment