Реализация JQuery модальной коробки Facebook - PullRequest
Новая
       11

Реализация JQuery модальной коробки Facebook

10 голосов
/ 05 декабря 2009

Мне было интересно, знает ли кто-нибудь о реализации jQuery этого модального блока MooTools . Я видел Facebox, но он выглядит как старая модальная раскладка диалогов Facebook, а не как новая.

Если таковых нет, то пример того, как оформить модальный диалог пользовательского интерфейса jQuery, будет очень полезным. Вывод HTML для модального диалога jQuery UI выглядит следующим образом: 

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

15 голосов
/ 05 декабря 2009

Как насчет плагина jQuery Facebox ?

Он поставляется прямо из коробки и делает практически все, что вам нужно. Просто измените ресурс изображения, указанный в CSS для кнопки «Закрыть», на тот, который вы копируете из Facebook, а верхние и нижние колонтитулы в стиле диалога Facebook. Полупрозрачные серые границы - все из коробки в плагине Facebook.

2 голосов
/ 07 декабря 2009

Это, вероятно, то, что вы ищете:

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

2 голосов
/ 07 декабря 2009

Почему бы не использовать библиотеку Facebook Connect?

FB.Connect.showShareDialog всегда показывает правильный макет для модального диалога, который использует Facebook. Facebook постоянно обновляет эту информацию, поэтому нет смысла использовать что-то, что быстро устареет, особенно если никто не идет в ногу со временем. Это то, что я использую в любом случае.

1 голос
/ 05 декабря 2009

Проверьте класс диалога JQueryUI. Вы можете взломать его CSS, чтобы выглядеть как Facebook.

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

1 голос
/ 05 декабря 2009
...