JQuery-Implementierung von Facebooks Modal Box

Question

Ich habe mich gefragt, ob jemand von einer jQuery-Implementierung von dieses MooTools-Modalfeld . Ich habe Facebox gesehen, aber es sieht aus wie das alte Facebook-Layout für modale Dialoge und nicht wie das neuere.

Wenn es keine verfügbar sind, dann ein Beispiel, wie man jQuery's ui modalen Dialog, um wie das aussehen würde wirklich hilfreich sein Thema. Die HTML-Ausgabe für den jQuery UI Modal Dialog sieht wie folgt aus:

<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

Wie wäre es mit dem jQuery-Plugin Facebox ?

Es ist sofort einsatzbereit und kann so ziemlich alles, was man braucht. Ändern Sie einfach die Bildressource, auf die in der CSS für die Schaltfläche "Schließen" verwiesen wird, in eine, die Sie von Facebook kopieren, und die obere Beschriftung und die Fußzeilen-Divs, die wie das Dialogfeld von Facebook gestylt sind. Die durchscheinenden grauen Ränder sind bereits im Facebook-Plugin enthalten.

Answer 2

Warum nicht die Bibliothek von Facebook Connect verwenden?

FB.Connect.showShareDialog zeigt immer das richtige Layout für den modalen Dialog, den Facebook verwendet. Facebook aktualisiert dieses Ding ständig, so dass es nicht viel Sinn macht, etwas zu verwenden, das schnell veraltet sein wird, vor allem, wenn niemand auf dem Laufenden bleibt. Ich verwende es jedenfalls.

Answer 3

Dies ist wahrscheinlich das, wonach Sie suchen:

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

Answer 4

Wie wäre es mit LightBox?

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

Answer 5

Sehen Sie sich die Dialog-Klasse von JQueryUI an. Sie können ihre CSS hacken, um wie die von Facebook auszusehen.

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