LoginSignup
5

More than 5 years have passed since last update.

jQuery UIで確認ダイアログを表示する

Posted at

概要

window.confirm1のかわりに、jQuery UI の Dialogで確認ダイアログを表示してみましょう。

確認環境

Version
jQuery 1.12.4
jQuery UI 1.12.1

実装コード

以下の様にshowConfirmDialog関数を定義します。
引数として、messageの他に各ボタンクリック時のコールバック関数を渡すようにしましょう。

showConfirmDialog.js
/**
 * 確認ダイアログを表示します。
 * @param  {String} message ダイアログに表示するメッセージ
 * @param  {Function} [okFunction] OKボタンクリック時に実行される関数
 * @param  {Function} [cancelFunction] Cancelボタンクリック時に実行される関数
 */
function showConfirmDialog(message, okFunction, cancelFunction) {
  // Dialogを破棄する関数
  var _destroyDialog = function(dialogElement) {
    dialogElement.dialog('destroy'); // ※destroyなので、closeイベントは発生しない
    dialogElement.remove(); // ※動的に生成された要素を削除する必要がある
  };

  // Dialog要素(呼び出し毎に、動的に生成)
  var $dialog = $('<div></div>').text(message);

  // 各ボタンに対応する関数を宣言
  // ※Dialogを破棄後、コールバック関数を実行する
  var _funcOk     = function() { _destroyDialog($dialog); if (okFunction)     { okFunction();     } };
  var _funcCancel = function() { _destroyDialog($dialog); if (cancelFunction) { cancelFunction(); } };

  $dialog.dialog({
    modal: true,
    title: '確認',

    // 「閉じる」の設定
    // ※Cancel時の処理を「閉じる」に仕込むことで、Cancelと「閉じる」を同一の挙動とする
    closeText: 'Cancel',
    closeOnEscape: true,
    close: _funcCancel,

    // 各ボタンの設定
    buttons: [
      { text: 'OK',     click: _funcOk },
      { text: 'Cancel', click: function() { $(this).dialog('close'); } } // Dialogのcloseのみ
    ]
  });
}

このコードのポイントは以下です。

  • Dialog 用の要素を動的に生成している
    • Dialog を閉じるときに、要素を削除する必要がある
  • Dialog を「閉じる」挙動と、Cancel ボタンクリック時の挙動を同一にしている

詳細はコード中のコメントをご参照ください。

使い方

こんな感じです。

See the Pen jquery.ui-confirm by pale2f (@pale2f) on CodePen.

最後に

久しぶりに jQuery を書きましたが、まだまだ捨てたもんじゃないなと思いました。

この記事は、別記事への布石として書きました。
↓の方にある「この記事は以下の記事からリンクされています」 からリンクされてると思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5