JQuery implementation of Facebook's Modal Box

Question

I was wondering if anyone knew of a jQuery implementation of this MooTools modal box. I've seen Facebox, but it looks like 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>

Answer 1

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 2

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 3

This is probably what you are looking for:

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