jQuery UI plug-in_jquery で確認確認ボックスをカスタマイズする方法

この記事の例では、jQuery UI プラグインを使用して確認確認ボックスをカスタマイズする方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

このコードは、jQuery UI を使用して確認ダイアログ ボックスの効果をカスタマイズします。この例では、確認ボックスのボタンをカスタマイズできます。ボタンとキャンセルボタンが定義されています。

HTML コード

<button id="callConfirm">Confirm!</button>
<div id="dialog" title="Confirmation Required">
 Are you sure about this&#63;
</div>&#8203;

jS コード:

$("#dialog").dialog({
  autoOpen: false,
  modal: true,
  buttons : {
    "Confirm" : function() {
      alert("You have confirmed!");
    },
    "Cancel" : function() {
     $(this).dialog("close");
    }
   }
  });
$("#callConfirm").on("click", function(e) {
  e.preventDefault();
  $("#dialog").dialog("open");
});

この記事が皆さんの jQuery プログラミングに役立つことを願っています。