【javascript】jqueryで簡単ダイアログ作成

その他
2022.12.24

概要

  • jqueryで簡単にダイアログ作成を行います。
  • Moldalのダイアログ作成を行います。

htmlソース

  • htmlソースは、以下のようになります。
<html>

<head>
 <title>ダイアログのテスト</title>
 <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">
</head>

<style>
/*******************************************
 jquery のダイアログのカスタマイズ 
********************************************/
/* モーダル時のバックグランドの色 */
.ui-widget-overlay
{
  opacity: .20 !important; /* Make sure to change both of these, as IE only sees the second one */
  filter: Alpha(Opacity=50) !important;

  background: rgb(50, 50, 50) !important; /* This will make it darker */
}

/* タイトルバーのフォント */
.ui-dialog-titlebar{
   padding: 0.3rem !important;
   font-size: 1.0rem;
}

/* ボタンのカスタマイズ */
.ui-dialog-buttonset{
   width: 100%;
   display: flex;
   display: -webkit-flex;
   text-align: center; /* センタリング */
   justify-content: space-around;
   -webkit-justify-content: space-around;
}
</style>

<body>

 <div >
   <div>
     <input type="button" id="btn3" value="サンプル実行ボタン">
   </div>
 </div>
    
 <!-- 入力ダイアログ  -->
 <div id="dialogSample" title="ダイアログのサンプル">
   <p id="abc_header1">ヘッダー1の内容</p>
   <p id="abc_header2">ヘッダー2の内容</p>
　 <input type="radio" id = "abc_radio1" name="radios"  checked>選択1

   <table >
     <tr>
       <td>　　アイテム1　<button type="button" id="btn_1" >ボタン1</button></td>
       <td><input id="item1" type="text" onblur="kanmaChange(this);" pattern="\d*" size="8" value="100,000" style="text-align: right"></td>
     </tr>
     <tr>
       <td>　　アイテム2　<button type="button" id="btn_2" >ボタン2</button></td>
       <td><input id="item2" type="text" onblur="kanmaChange(this);" pattern="\d*" size="8" value="100,000" style="text-align: right"></td>
     </tr>
   </table>
   <br>
   <input type="radio" id = "abc_radio2" name="radios" >選択2

   <table >
      <tr>
        <td>　　アイテム3　<button type="button" id="btn_3n" >ボタン3</button>  </td>
        <td><input id="item3" type="text" onblur="kanmaChange(this);" pattern="\d*" size="8" value="100,000" style="text-align: right"></td>

                <td id="item3Comment"></td>
     </tr>

     <tr>
       <td>　　アイテム4　<button type="button" id="btn_4n" >ボタン4</button></td>
       <td><input id="item4" type="text" onblur="kanmaChange(this);" pattern="\d*" size="8" value="100,000" style="text-align: right"></td>
  
   </tr>
   </table>
   <br>
   <table>
     <tr>
       <td>アイテム5</td> 
       <td><input id="item5"  size="5" value="1.0" style="text-align: right;"></td>

    </tr>
   </table>
   <p id="abc_info1">内容1行目</p>
   <p id="abc_info2">内容2行目</p>
   <p id="abc_info3">内容3行目</p>
		
</div>


<script type="text/javascript">

  //javascriptの初期化で行う
  $(function() {
      
    // 入力ダイアログを定義
    $("#dialogSample").dialog({
       autoOpen: false,
       height: 700,
       width: 500,
       modal: true,
       buttons: {
         "プレビュー": function() {
                   
           //例えばjavascritの関数をCall
           // preView():       
                   
         },
    
         "ＯＫ": function() {
       
           //例えばjavascritの関数をCall
           // OKFunction():

          $(this).dialog("close");
    
         },
    
        "キャンセル": function() {
         
          //例えばjavascritの関数をCall
          // CloseFunction():
          $(this).dialog("close");
        }
      }
    });

    // 入力ダイアログを表示
    $("#btn3").click(function() {
       $("#dialogSample").dialog("open");
       return false;
    });
  });
       
</script> 
  
</body>
</html>

説明

html部分

  • html部分は、普通にhtmlソースで書きます。特にダイアログを使用する上で制限はありません。

javascript

  • OKボタンなどを配置します。
  • ダイアログの定義、初期化などを行います。
  • <div id=”dialogSample” ～>と$(“#dialogSample”).dialog({～　でid要素でダイアログと紐付けます。

CSS

  • モーダル時のバックグランドの色、タイトルバーのフォント、ボタンのカスタマイズ等ができます。
スポンサーリンク