Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

概要

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 を書きましたが、まだまだ捨てたもんじゃないなと思いました。

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away