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

Question

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

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

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

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

• Я хочу позвонить, используя скрипт. Показать скрытый элемент 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 выполняет практически все, о чем вы просите. Кроме того, я не заметил, что отображение занимает очень много времени. Вам даже не нужно иметь элемент 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 3

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

Answer 4

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

Answer 5

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

Answer 6

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 7

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

Answer 8

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

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