6

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

理想的实现:

   function showDialog(values)
    {
      processToChangeDom(values);
      changeDivTobeDisplayed();
      modalDialog.show();
    }
  • 它应该很快,类似于 StackOverflow 上的添加和链接对话框。大多数库都需要很长时间才能加载带有精美效果和内容的对话框。

  • 我想使用脚本调用它。内联显示隐藏的 div 或 span 元素。大多数库都在讨论用 rel、class 和 href=#hiddenDiv 之类的东西填充锚点。我需要能够在不向我的锚添加不必要的属性的情况下实现我想要的。像这样的东西

  • 它应该反映我对隐藏 Div 中的 DOM 所做的更改。我使用了 facebox,发现它会复制隐藏的 div,并且对 DOM 的更改不会反映在模态窗口上。

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

有没有人有什么建议?我已经尝试过 facebox、simplemodal 和一系列库,它们中的大多数不支持我上面描述的这些功能中的一个或另一个。

4

8 回答 8

3

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

于 2010-03-29T11:53:04.110 回答
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,
               ...
            })
  });
于 2010-03-29T11:55:14.077 回答
3

试试SimpleModal。我发现它的 API 相当不错。

于 2010-03-29T11:57:16.583 回答
1

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');
  }
于 2010-03-29T13:17:56.743 回答
1

ThickBox工作得很好,特别是如果你想在你的模态框里做视频或闪光灯之类的事情。

于 2010-03-29T14:03:15.437 回答
1

如果你碰巧在使用 Twitter 的 Bootstrap 框架,那么你应该看看BootBoxJs

于 2012-12-09T14:39:35.327 回答
0

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

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

于 2010-03-29T11:56:52.797 回答
0

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

于 2010-03-29T12:01:42.400 回答