Facebook的Modal Box的JQuery实现

时间:2009-12-05 01:20:56

标签: jquery facebook modal-dialog

我想知道是否有人知道this MooTools modal box的jQuery实现。 我见过Facebox,但它看起来像旧的Facebook模式对话框布局而不是新版本。

如果没有任何可用的话,那么如何将jQuery的ui模态对话框看作是一个非常有用的示例。 jQuery UI模式对话框的HTML输出如下所示:

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

5 个答案:

答案 0 :(得分:15)

jQuery插件Facebox怎么样?

它开箱即用,可以完成你需要的一切。只需将关闭按钮的CSS中引用的图像资源更改为从Facebook复制的图像资源,并将顶部标题和页脚div设置为类似Facebook的对话框。半透明的灰色边框在Facebook插件中都是开箱即用的。

答案 1 :(得分:2)

为什么不使用Facebook Connect的库?

FB.Connect.showShareDialog始终显示Facebook使用的模式对话框的正确布局。 Facebook一直在更新这个东西,所以使用一些过时的东西并没有多大意义,特别是如果没有人跟上最新的话。这就是我用的东西。

答案 2 :(得分:2)

答案 3 :(得分:1)

答案 4 :(得分:1)

查看JQueryUI的Dialog类。你可以破解它的CSS看起来像Facebook。

请参阅http://www.jqueryui.com/demos/dialog/#modal-form