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

jQuery UI ダイアログは、あなたが求めているほとんどすべてのことを行います。また、表示に時間がかかることにも気づきませんでした。DOM 要素を使用するために存在する必要さえありません。UI ウィジェットの優れた点の 1 つは、必要なコンポーネントとコアのみをロードする必要があることです。これらは 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 3 · Accepted Answer

3

jQuery UI を調べましたか? http://jqueryui.com/demos/dialog/

于 2010-03-29T11:53:04.110 に答える

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

Twitter の Bootstrap フレームワークを使用している場合は、 BootBoxJsを確認してください。

score 1 · Accepted Answer

特に、モーダル内でビデオやフラッシュなどを実行する場合は、 ThickBoxが非常にうまく機能します。

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