ダイアログを表示する

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQueryのblockUI()プラグインを利用してダイアログを表示します。サンプルの[Show Dialog]ボタンをクリックするとダイアログに「Would you like to continue?」が表示されますので[Yes]をクリックします。すると、wait.aspxを非同期で呼び出します。wait.aspxの処理が完了すると自動的にダイアログを閉じます。wait.aspxはサーバー側で２秒間スリープします。

このサンプルは、jQueryのblockUI()プラグインを利用してダイアログを表示します。サンプルの[Show Dialog]ボタンをクリックするとダイアログに「Would you like to continue?」が表示されますので[Yes]をクリックします。すると、wait.aspxを非同期で呼び出します。wait.aspxの処理が完了すると自動的にダイアログを閉じます。wait.aspxはサーバー側で２秒間スリープします。 

    $(function() {   
      $().ajaxStop($.unblockUI);
      $('#showDialog').click(function() {   
        $.blockUI({ message: $('#question'), css: { width: '275px'} });   
      });   
      $('#yes').click(function() {   
        $.blockUI({ message: '<h1>Remote call in progress...</h1>' });   
        $.ajax({   
          url: 'wait.aspx', // or url: 'wait.php',   
          cache: false,   
          complete: function() {   
            $.unblockUI();   
          }   
        });   
      });   
      $('#no').bind('click', $.unblockUI);   
    });


<div style="margin: 10px 0 0 10px;">
  <p>
    <input id="showDialog" type="submit" value="Show Dialog" />
  </p>
  <div id="question" style="display: none; cursor: default">
    <h3>Would you like to contine?</h3>
    <input type="button" id="yes" value="Yes" />
    <input type="button" id="no" value="No" />
  </div>
</div>