• Javascript

jQueryでダイアログを実装する方法【jQueryUIのdialogの使い方】

投稿日:2022年03月05日

jQueryUIのdialogとは？

WEBサイトを制作しているうえでは、メッセージや入力フォームを扱う時にポップアップされるダイアログを表示させたい場面があります。

本来であればJavascriptでプログラミングして作らなければなりませんが、jQueryUIを使えば簡単に実装することができます。

下のサンプルがjQueryUIのdialogです。ボタンをクリックしてみてください。ダイアログが開きます。

jQueryUIを使えば、このようなリッチなデザインと機能を持つダイアログを手軽にサイトに実装することが可能です。

jQueryUIについて

jQueryUIとは、フォームの入力などユーザーの操作面における機能をパッケージ化したjQueryのライブラリです。

Javascriptを簡単に扱えるようにしたjQueryを使って、更にパーツやエフェクトに特化して誰でも手軽に利用しやすいようにしてくれたものがjQueryUIです。

今回説明するダイアログ機能は、通常であれば複雑なコードを記述してプログラミングしなければ実装できませんが、jQuery UIを用いることで短いコードで簡単に扱えるようになります。

jQuery UIをCDNで読み込む

jQueryUIはjQueryとは別で新たに読み込む必要があります。

ダウンロードしたものを使う方法もありますが、ここではCDNを使ってサイトに読みこむ方法を説明します。

下記のコードをコピーして貼りつければOKです。なお、jQuery UIは本体であるJavascriptファイルとスタイルシートの2つをセットで読み込みます。

また、jQuery UIを動作させるためにはあらかじめjQeuryを読み込ませておく必要があるため、jQueryの読み込みのコードよりも後に記述します。

<!--jQueryを読み込み-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--jQuery UIを読み込み-->
<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">

jQuery UIについて詳しくはこちら

jQuery UIの使い方

jQuery UIとは、jQueryを用いて作られた便利な機能を簡単にサイトに実装することができるライブラリです。具体的には、カレンダーやタブなどの装飾やオートコンプリートなどの機能、フェードインなどのアニメーションが簡単な記述だけで使用することが可能です...【もっと読む】

jQueryUIのdialogの使い方

ここからは実際にjQueryUIのダイアログを導入する手順を説明していきます。

まずは、ダイアログとして表示させる要素をHTMLで作成します。

<div class="sample_dg">ダイアログの中身をここに記載します。</div>

この要素はダイアログとして表示させたいので、最初はdisplay:noneを指定して非表示にしておきます。

.sample_dg{
    display: none;
}

続いてダイアログを開くきっかけとなるボタンをHTMLで用意します。ボタンのデザインはCSSで自由に作成してください。

<button class="btn_open">開く</button>

HTML側の準備ができたので、jQueryでボタンがクリックされたらダイアログが開くようにプログラミングします。

jQueryのダイアログは下記のように記述して有効化します。

クリックされたら開くようにしたいので、onメソッドを使ってクリックイベントを作ります。

$(function(){
    $(".btn_open").on("click",function(){
        $(".sample_dg").dialog({
            title:"サンプル",
        });
    });
});

以上がjQuery UIのdialogの基本的な使い方です。ここまでをまとめると次のようになります。

<button class="btn_open">開く</button>
<div class="sample_dg">ダイアログの中身をここに記載します。</div>

.sample_dg{
    display: none;
}

$(function(){
    $(".btn_open").on("click",function(){
        $(".sample_dg").dialog({
            title:"サンプル",
        });
    });
});

dialogのオプションを設定する

先程の状態ではダイアログ表示ができただけですので、jQueryUIに用意されているオプションを設定していきカスタマイズします。

既に設定している「title」もオプションのひとつで、その他にもjQuery UIのdialogには次のようなオプションが設けられています。

オプションは下記のように「,」（カンマ）で区切って必要なオプションをdialogへ追記していきます。

autoOpenの使い方

autoOpenを設定すると元の要素に対してdisplay:noneを使って非表示にする必要は無くなりますが、jQuery側での記述に少し修正が必要になります。

$(function(){
    $(".sample_dg").dialog({
        title:"サンプル",
        autoOpen:false,//trueにするとはじめから表示
    });
    $(".btn_open").on("click",function(){
        $(".sample_dg").dialog("open");
    });
});

buttonsの使い方

buttonsを使うとダイアログ内へ新しいボタンの追加し、押した際の処理を設定することができます。

閉じるなどダイアログに関する処理の他、アラートメッセージを出すなどjQueryによる他の処理を実行させることも可能です。

$(function(){
    $(".btn_open").on("click",function(){
        $(".sample_dg").dialog({
            title:"サンプル",
            buttons:{
                "キャンセル":function(){
                    $(this).dialog("close");
                },
                "実行":function(){
                    alert("実行ボタンが押されました。");
                },
            },
        });
    });
});

showとhideの使い方

showとhideを使うとダイアログが開閉するときのアニメーションを変更することができます。

設定できるアニメーションのパターンは、「blind」「bounce」「clip」「drop」「explode」「fade」「fold」「highlight」「puff」「pulsate」「scale」「shake」「size」「slide」の中から選びます。

各アニメーションの動きについてはjQuery UIの公式サイトでご確認ください。

$(function(){
    $(".btn_open").on("click",function(){
        $(".sample_dg").dialog({
            show:"fold",
            hide:"slide",
        });
    });
});

modalの使い方

modalを有効にするとダイアログが開いている間は、ダイアログとページの間にフィルターが掛かり、スクロールやクリックといった他の操作ができなくなります。

ユーザーに対してダイアログ内の操作を優先させたい場合などに設定します。

下の例を見てもらうとわかるように、ダイアログが開いているとボタンを押すことができなくなります。

$(function(){
    $("#btn1").on("click",function(){
        $("#dialog1").dialog({
            title:"ダイアログ1",
            modal:true,
        });
    });
    $("#btn2").on("click",function(){
        $("#dialog2").dialog({
            title:"ダイアログ2",
            modal:true,
        });
    });
});

dialogのデザインを変更する

jQuery UIは読み込むテーマを変えることで、簡単にデザインを変更することができます。

なお、テーマを変更するとdialogだけでなくjQuery UIの他の機能のデザインも全て変更になりますのでご注意下さい。

下記のCSSファイルを読み込んでいるコードの中の「smoothness」が今回使用しているテーマを示しています。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

この部分を変更したいテーマ名に書き換えれば、読み込むテーマが変更されデザインが切り替わります。

テーマは「base」「ui-lightness」「ui-darkness」「smoothness」「start」「redmond」「sunny」「overcast」「re-frog」「flick」「pepper-grinder」「eggplant」「dart-hive」「cupertino」「south-street」「blitzer」「humanity」「hot-sneaks」「excite-bike」「vader」「dot-luv」「mint-choc」「black-tie」「trontastic」「swanky-purse」の中から選択します。

「ui-lightness」というテーマを使う場合は下記のように変更します。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css">

下のサンプルでは、プルダウンメニューでダイアログデザインが切り替わるようにしてありますので、テーマを選ぶ際の参考にしてください。

他のパーツのデザインがどのように変わるかなどテーマの詳細についてはjQuery UIの公式サイトのテーマページをご確認下さい。

まとめ

ダイアログの開閉をはじめ、モーダル設定やドラッグの可否など自作するには難しい機能もjQueryUIを使えば簡単に導入することができます。デザインも豊富に用意されている点も使いやすいです。またクリックイベント以外でもjQueryでカスタマイズすればさまざまなサービスに活用できると思います。