任何人都可以告诉我一个不太糟糕的jQuery模式对话框库

时间:2010-03-29 11:49:37

标签: javascript jquery modal-dialog jqmodal

基于jQuery的模式对话框非常棒,只要你按照示例告诉你的那样做。我需要一个基于jQuery的模态对话框库,它必须具有以下特征:

理想的实施:

   function showDialog(values)
    {
      processToChangeDom(values);
      changeDivTobeDisplayed();
      modalDialog.show();
    }
  • 应该很快,就像StackOverflow上的添加和链接对话框一样。大多数图书馆都会花费永恒的时间来加载具有奇特效果和内容的对话框。

  • 我想用脚本调用它。内联显示隐藏的div或span元素。图书馆的MOst用rel,class和href =#hiddenDiv等东西来填充锚点。我需要能够得到我想要的东西,而不会给我的锚添加不必要的属性。像这样的东西

  • 它应该反映我在隐藏的Div中对DOM所做的更改。我使用了facebox,发现它制作了隐藏div的副本,对DOM的更改并没有反映在模态窗口上。

  • 我需要能够使用javascript调用close模式div,并将beforeOpen和afterClose处理程序附加到操作中。

有没有人有任何建议?我已经尝试了facebox,simplemodal和一系列库,其中大多数都不支持我上面描述的这些函数中的一个或另一个。

8 个答案:

答案 0 :(得分:3)

你看过jQuery UI吗? http://jqueryui.com/demos/dialog/

答案 1 :(得分:3)

jQuery UI对话框几乎可以满足您的所有要求。另外,我没有注意到显示它需要很长时间。您甚至不需要使用DOM元素来使用它。关于UI小部件的一个好处是你只需要加载你需要的组件和核心。它们也可以通过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,
               ...
            })
  });

答案 2 :(得分:3)

试试SimpleModal。我发现它的API非常好。

答案 3 :(得分:1)

jquery-ui dialog我发现体重轻,动态 这里有一个如何在函数中使用它的例子

  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');
  }

答案 4 :(得分:1)

ThickBox效果非常好,特别是如果您想在模态中执行视频或闪光等操作。

答案 5 :(得分:1)

如果您恰好使用Twitter的Bootstrap框架,那么您应该查看BootBoxJs

答案 6 :(得分:0)

我自己研究了很多模态盒子,我想出的最好的盒子是ThickBox。 jquery UI框也可以,但我不喜欢它处理后退按钮的方式。

Thickbox涵盖了您的要求列表中的第1-3点。由于源代码不太复杂,因此可以轻松添加偶数处理程序。

答案 7 :(得分:0)

试试BlockUI。我发现它非常好。