Facebook Dialog using jQuery and CSS

Today we will learn how to make a Facebook dialog using jQuery and CSS.
In this tutorial, we will create a dialog like the one on Facebook. When the button or link is clicked to show the dialog, the overlay of the dialog is shown, then the dialog’s height and width are animated to show inside content.

The jQuery

We will be using jQuery’s animate method. Using this requires a width and height to animate to. It will not animate to a width or height of auto.
In order to animate the height of the dialog with the height set to auto, we first have to get the height of our dialog. So, we set the opacity to 1 for the .overlay and .facebook_dialog, then show the .overlay. Next get the height of dialog. Now that we have the height, hide the .overlay and .facebook_dialog. Remove the inline styles we added with jQuery. Set the min height of .facebook_dialog to 90px for our animation effect. We set the min height after we get the dialog height. Otherwise we would not get the actual height of the dialog, or we would end up with min height 90px instead of the dialog’s actual height. If we did away with the height animation, the above code would not be necessary. So we need to do it this way to make it like Facebook. Now for the animation of the dialog. When a user clicks the .show-dialog button, we show the .overlay. Next set the width of the dialog to 225px for animation. Then animate .facebook_dialog setting the opacity to 1, height to fbheight set previously, and width to 448px. After animation is completed, show .fade div. Closing the dialog: When a user clicks on the .cancel_button, .close, or .okay_button we fade them out “slow” and when they fade out, we simply remove the in line style.

The markup

The dialog has a main container with the class .facebook_dialog. Everything inside the .fade will not be shown until after the dialog has been opened.


The .facebook_dialog class opacity is set to 0 to hide the dialog. Our dialog container will have the following style: The .fade class is set to display “none”. The content inside this div will not be shown until the dialog animation is complete. The .overlay overlay, display set to “none”. The overlay will be shown when the dialog is displayed. The full CSS below:


And that’s it! I hope you enjoyed this tutorial and find it useful!


Tagged with:

View all contributions by

Website: http://rrpowered.com

Related Articles


Stay connected with us

Add us on Google+

Follow us on Facebook

Follow us on Twitter

Get updates via RSS

Get email updates


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="">