Facebook的Modal Box的JQuery实现 [英] JQuery implementation of Facebook's Modal Box

问题描述

我想知道是否有人知道此MooTools模式框的jQuery实现. 我看过Facebox，但它看起来像旧的Facebook模式对话框布局，而不是较新的对话框.

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.

如果没有可用的示例，那么如何将jQuery的ui模态对话框主题化的示例将非常有帮助. jQuery UI Modal对话框的HTML输出如下所示:

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>

推荐答案

关于jQuery插件 Facebox ?

How about the jQuery plugin Facebox ?

它开箱即用，几乎可以满足您的所有需求.只需将CSS中关闭"按钮中引用的图像资源更改为您从Facebook复制的图像资源，然后将顶部标题和页脚div设置为类似于Facebook对话框的样式.半透明的灰色边框在Facebook插件中都是开箱即用的.

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.

这篇关于Facebook的Modal Box的JQuery实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！