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

Question

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

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

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

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

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

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

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

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

Answer 1

Пробег: SimpleModal. Я нашел API неплохим.

Answer 2

Вы заглянули в пользовательский интерфейс jQuery? 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

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

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

Answer 5

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

Answer 6

jquery-ui dialog я нашел, чтобы быть легким весом и динамичным здесь в exmple, как вы можете использовать его в Funciton

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

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

Answer 8

Если вы используете брандмауэр Twitter, тогда вы должны зарегистрироваться BootBoxJs.

Answer 9

Я бы пошел с modaal. Он прост в использовании, имеет широкий спектр методов и ориентирован на доступность.