jQuery UIを使って簡単にダイアログを表示させる方法
ブラウザ上でユーザーに対してちょっとした確認を行いたい場合はJavaScriptのconfirmを用いて「はい」「いいえ」を選択してもらっていたが、それ以外の選択肢の追加であったり、メッセージ内にリンクを設置したい案件があった。ダイアログを設置するのが良さそうなものの、自身で設置したことが無かった。色々調べてみたところjQuery UIが簡単に設置できたので以下に方法をメモ。
サンプル
https://taitan916.info/sample/dialog/
「ダイアログ表示」ボタンをクリックするとダイアログが表示される。その後に「はい」「キャンセル」「その他」「リンク」をクリックすると、ダイアログが非表示となり「●●をクリックしました」と文言が表示される。
ソースコード
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery UIのダイアログサンプル</title> <link href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <a href="javascript:void(0);" class="btn btn-primary" id="dialog_btn"> ダイアログ表示 </a> <div id="dialog_area" style="display:none;"> <p> ダイアログテストです。<br> <a href="javascript:void(0);" id="dialog_link" style="font-weight: bold; color: #f00;">リンク</a>も設置できます。<br> </p> </div> <div id="dialog_result"> </div> <script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script> $(function(){ //ダイアログ表示ボタンクリック時 $('#dialog_btn').click(function(){ $("#dialog_area").dialog({ modal:true, title:"登録確認", buttons: { "はい": function() { $('#dialog_result').html('はいをクリックしました。'); $('#dialog_area').dialog('close'); }, "キャンセル": function() { $('#dialog_result').html('キャンセルをクリックしました。'); $('#dialog_area').dialog('close'); }, "その他": function() { $('#dialog_result').html('その他をクリックしました。'); $('#dialog_area').dialog('close'); }, } }); }); //ダイアログ内リンククリック時 $('#dialog_link').click(function(){ $('#dialog_result').html('リンクをクリックしました。'); $('#dialog_area').dialog('close'); }); }); </script> </body> </html>
3つ目のボタンが設置及びメッセージ内にリンクを設置し、それぞれのクリック時に異なる処理を行える。
リファレンス
https://js.studio-kingdom.com/jqueryui/widgets/dialog
所感
jQuery UIはカレンダーピッカーを使うまで何となく食わず嫌いしていたけどすごく便利かも。
関連記事
-
-
jQueryにて指定した要素を検索条件から除外するnot()の利用方法
あるソースコードを拝見しているとjQueryでnot()という使ったことの無いメ ...
-
-
八地方区分→都道府県→路線→駅名の連携したセレクトメニュー の実装方法
八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...
-
-
アンカーリンクでURLに「#hoge」のようなパラメータを残さずスクロールさせる方法
アンカータグをクリックしてもブラウザのURL欄に「#hoge」のようなハッシュを ...
-
-
jQueryプラグインでクリップボードにコピーする方法(clipboard.js)
ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...
-
-
「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...