Может кто-нибудь сказать мне о библиотеке модальных диалоговых окон jQuery, которая не сосет

Question

Модальные диалоговые окна, основанные на jQuery, хороши, если вы делаете так, как подсказывает пример. Мне нужна библиотека модальных диалоговых окон на основе jQuery, которая должна иметь следующие характеристики:

Идеальная реализация:

   function showDialog(values)
    {
      processToChangeDom(values);
      changeDivTobeDisplayed();
      modalDialog.show();
    }

• Это должно быть быстро, что-то вроде диалога добавления и ссылки в Stackru. Большинству библиотек требуется целая вечность, чтобы загрузить диалог с его причудливыми эффектами и прочим.

• Я хочу назвать это с помощью сценария. Показать скрытый элемент div или встроенный элемент span. Большинство библиотек говорят о заполнении якоря с помощью rel, class и href=#hiddenDiv. Мне нужно иметь возможность получить то, что я хочу, без добавления ненужных атрибутов к моей привязке. Что-то вроде этого

• Он должен отражать изменения, которые я делаю в DOM в скрытом Div. Я использовал facebox и обнаружил, что он делает копию скрытого div и изменения в DOM не отражаются на модальном окне.

• Мне нужно иметь возможность вызывать модальный элемент close с помощью javascript, а также прикреплять обработчики beforeOpen и afterClose к действию.

У кого-нибудь есть предложения? Я уже пробовал facebox, simplemodal и целый ряд библиотек, большинство из которых не поддерживают те или иные функции, которые я описал выше.

Answer 1

Попробуйте SimpleModal. Я нашел, что это API довольно приятно.

Answer 2

Вы смотрели в JQuery UI? http://jqueryui.com/demos/dialog/

Answer 3

Диалог пользовательского интерфейса jQuery выполняет практически все, о чем вы просите. Кроме того, я не заметил, что отображение занимает очень много времени. Вам даже не нужно иметь элемент DOM, чтобы использовать его. Одна приятная вещь в виджетах пользовательского интерфейса заключается в том, что вам нужно загружать только те компоненты, которые вам нужны, плюс ядро. Они также широко доступны через сети CDN, поэтому возможно, что для клиента пользователя уже загружен JS.

 $(function() {
      $('<div title="I am a dialog"><p>Put whatever you want in here</p></div>')
           .dialog({
               autoOpen: true,
               modal: true,
               open: function(event,ui) { ... },
               close: function(event,ui) {
                         ...
                         $(this).dialog('destroy');
                      }
               draggable: false,
               resizable: false,
               ...
            })
  });

Answer 4

Диалог jquery-ui, который я нашел, является легким и динамичным, здесь пример того, как вы можете использовать его в функции.

  function display_alert(message,title) {
    title = title || "Alert";
      $('#alert').text(message); // the message that will display in the dialog

      $("#alert").dialog({
          autoOpen: false,
          bgiframe: true,
          modal: true,
        title:title,
        open: function() {
        },
        close: function (){
            $(document).unbind('keypress'); 
        },
          buttons: {
              OK: function() {
                  $(this).dialog('close');
              }
          }
      });
    $('#alert').dialog('option', 'title', title);
      $("#alert").dialog('open');
  }

Answer 5

ThickBox работает довольно хорошо, особенно если вы хотите делать такие вещи, как видео или флеш-анимацию внутри ваших модалов.

Answer 6

Если вы используете платформу Twitter Bootstrap, то вам следует проверить BootBoxJs.

Answer 7

Я сам просмотрел несколько модальных коробок, и лучшая, которую я придумал, это ThickBox. Ящик пользовательского интерфейса jquery тоже был в порядке, но мне не понравилось, как он обрабатывает кнопку возврата.

Thickbox охватывает пункты 1-3 в вашем списке требований. Четные обработчики могут быть легко добавлены, так как исходный код не слишком сложен.

Answer 8

Попробуйте BlockUI. Я нашел это довольно хорошо.