jQuery ダイアログ

 from https://programmercollege.jp/column/9937/

１．ダイアログを表示

　
jQuery UI を使用して、ダイアログを表示します。
ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">

<script type="text/javascript">
<!--
$(function() {
  $("#btn").click(function() {
    $("#dl").dialog({
      modal:true,
      title:"ダイアログのタイトル",
      buttons: {"OK": function() {$(this).dialog("close");}}
    });
  });
});
//-->
</script>

<div id="dl" style="display:none;">
  <p>このようなダイアログが表示されます！</p>
</div>
<div style="background-color:#CCC; padding : 20px;">
  <input type="button" id="btn" value="ダイアログ表示">
</div>

jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。

このページのサンプルは、テーマ「 Pepper Grinder 」を選択しています。
他のテーマを選択すると ダイアログの印象も変わってきます。

▲目次へ戻る

　

２．確認ダイアログ

　
jQuery UI を使用して、「 OK 」と「キャンセル」の 2 つのボタンを表示する 確認ダイアログを作成します。
確認ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">

<script type="text/javascript">
<!--
$(function() {
  $("#btn2").click(function() {
    $("#dl2").dialog({
      modal:true,
      title:"確認画面",
      buttons: {
        "ＯＫ": function() {$(this).dialog("close");},
        "キャンセル": function() {$(this).dialog("close");}
      }
    });
  });
});
//-->
</script>

<div id="dl2" style="display:none;">
  <p>この内容でよろしいでしょうか？</p>
</div>
<div style="background-color:#CCC; padding : 20px;">
  <input type="button" id="btn2" value="確認">
</div>

▲目次へ戻る

　

３．入力可能なダイアログ

　
jQuery UI を使用して、入力機能のあるダイアログを作成します。
ボタンをクリックしてみて下さい。

保存しました。（ ID：11、名前：ww ）

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">

<script type="text/javascript">
<!--
$(function() {
  // 入力ダイアログを表示
  $("#btn3").click(function() {
    $("#input").dialog("open");
    return false;
  });

  // 入力ダイアログを定義
  $("#input").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      "ＯＫ": function() {
        displayMessage("保存しました。（ ID："
          + $("#inputId").val()
          + "、名前："
          + $("#inputName").val()
          + " ）");
        $(this).dialog("close");},
      "キャンセル": function() {
        displayMessage("キャンセルしました。");
        $(this).dialog("close");}
    }
  });
});

// 処理メッセージ表示
function displayMessage(str) {
  $("#info").html(str);
}
//-->
</script>

<div style="background-color:#CCC; padding : 20px;">
  <div>
    <input type="button" id="btn3" value="入力">
  </div>
  <div id="info"></div>
</div>

<!-- 入力ダイアログ  -->
<div id="input" title="入力ダイアログ">
  <table>
    <tr>
      <th>ID</th>
      <td><input type="text" id="inputId" size="10" maxlength="10"></td>
    </tr>   
    <tr>
      <th>名前</th>
      <td><input type="text" id="inputName" size="20" maxlength="30" /></td>
    </tr>
  </table>
</div>

「 $(“#inputName”).val() 」のような記述で ダイアログ内の入力データを取得できるので、とても便利です。