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 模态对话框的 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屋！