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>");

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


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

Bookmark It

Hide Sites

Hasin Hayder in JavaScript | 1 Comment » on Thursday, March 20th, 2008 at 12:09 pm.
RSS 2.0 | Leave a response | Trackback