javascript - 谁能告诉我一个不吸水的 jQuery 模态对话框库

Question

只要您按照示例告诉您的那样做，基于 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 和一系列库，它们中的大多数不支持我上面描述的这些功能中的一个或另一个。

score 3 · Accepted Answer

3

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

于 2010-03-29T11:53:04.110 回答

score 3 · Accepted Answer

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,
               ...
            })
  });

score 3 · Accepted Answer

3

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

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

1

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

0

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

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

javascript - 谁能告诉我一个不吸水的 jQuery 模态对话框库

8 回答 8

Related

Reference