JQuery implementation of Facebook's Modal Box

Question

Hi all,

I was wondering if anyone knew of a jquery implementation of the following moo-tools modal box -> click here I've seen facebox, but it uses the old facebook modal dialog layout and not the newer one.

If there aren't any available then an example of how to theme jquery's ui modal dialog to look like that would be really helpful. The html output for the JQuery UI Modal Dialog looks like this:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Content.</p>
   </div>
</div>

Thanks

Answer 1

How about LightBox?

http://leandrovieira.com/projects/jquery/lightbox/

Answer 2

Check out JQueryUI's Dialog Class. You can hack its CSS to look like the Facebook one.

See http://www.jqueryui.com/demos/dialog/#modal-form.

Answer 3

See AjaxRain

Everything tagged jQuery

Among those just quickly skim through the entries and look for "Facebook" on the pages.
Next / Prev page navigation exists - there are 400+ jquery items :-)
You might want to grab their RSS feed too. (I use Google Reader)

Answer 4

How about the Jquery plugin Facebox ?

It comes right out of the box doing pretty much everything you need. Just change the image resource referenced in the CSS for the Close button to one you copy from Facebook, and top caption and footer divs styled like Facebook's dialog. The translucent gray borders are all there out of the box in the Facebook plugin.

Answer 5

Why not use Facebook Connect's library?

FB.Connect.showShareDialog always shows the correct layout for the modal dialog Facebook uses. Facebook updates this thing all the time so it doesn't make a lot of sense to use something that will be outdated quickly, especially if nobody is keeping up to date. It's what I use anyway.

Answer 6

This is probably what you are looking for:

http://www.electrictoolbox.com/jquery-facebox-opaque-background/