ダイアログ

ダイアログを表示する

親譲りの無鉄砲で 小供の時から損ばかりしている。 小学校に居る時分 学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも 知れぬ。別段深い理由でもない。 新築の二階から首を出していたら、 同級生の一人が冗談に、いくら威張っても、 そこから飛び降りる事は出来まい。弱虫やーい。 と囃したからである。

CODE
HTML 

   <p id="bochan"><a href="javascript:dialogOpen('親譲り','<p>体質・性格・財産などを）親から受け継ぐこと。<br/>また、そのもの。<br/> 「 －の長身」 「 －の無鉄砲」 「 －の財産」</p>',400,300,'clip','#bochan')">親譲り</a>の無鉄砲で
 小供の時から損ばかりしている。
 小学校に居る時分 学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。
 なぜそんな無闇をしたと聞く人があるかも 知れぬ。別段深い理由でもない。
 新築の二階から首を出していたら、 同級生の一人が冗談に、いくら威張っても、
 そこから飛び降りる事は出来まい。弱虫やーい。
 と<a href="javascript:dialogOpen('囃す','<p>☆声をそろえてあざけったり、ほめそやしたりする。<br />「弱虫やあいと囃す」<br />「やんやと囃されて得意になる」</p>',400,300,'explode','#bochan')">囃した</a>からである。
   </p>
Javascript 

// 下記をbodyの下に読みこませておく！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>
// ### Dialog を開く
// dialogTitle:タイトル
// dialogMsg:メッセージ（HTMLで)
// w: width, h: height, s: アニメーション動作(showとhide)の動きのパラメータ
function dialogOpen(dialogTitle, dialogMsg, w, h, s)
{
  var x = $('<div id="dialog1"></div>').dialog({autoOpen:false});
  x.html(dialogMsg);
  /* ダイアログのオプションを設定して */
  x.dialog('option', {
      title: dialogTitle,
      width:w,
      height:h,
      buttons: {
          '了解': function() { $(this).dialog('close');
                           //    $(this).dialog("destory").remove()
                             },
      //    '追加できる': function() { $(this).dialog('close'); }
      },
        show: s,
        hide: s
  });
  /* ダイアログを開きます */
  x.dialog('open');
}
CSS 

<link href="css/jquery-ui.css" rel="stylesheet">

アニメーション(showとhideの値)

  • clip(下から上に現れる)
    • CODE
    HTML 
    
 <a href="javascript:dialogOpen('showとhideのパラメータ','<p>clip(下から上に現れる)</p>',200,200,'clip')">clip(下から上に現れる)</a>
    Javascript 
    
// 下記をbodyの下に読みこませておく！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>

// ### Dialog を開く
// dialogTitle:タイトル
// dialogMsg:メッセージ（HTMLで)
// w: width, h: height, s: showとhideの動きのパラメータ
function dialogOpen(dialogTitle, dialogMsg, w, h, s,taishou)
{
  var x = $('<div id="dialog1"></div>').dialog({autoOpen:false});
  x.html(dialogMsg);
  /* ダイアログのオプションを設定して */
  x.dialog('option', {
      title: dialogTitle,
      width:w,
      height:h,
      position: {my: "right bottom", at: "right bottom", of: taishou},
// my:要素自身の基準点を要素内のどの位置にするのかを、” 水平位置　垂直位置 ” の順で指定
//    水平位置の指定値:left center right
//    垂直位置の指定値:top center bottom
// at: of 」で指定された HTML 要素のどの位置に配置するのかを、” 水平位置　垂直位置 ” の順で指定
      buttons: {
          '了解': function() { $(this).dialog('close');
                           //    $(this).dialog("destory").remove()
                             },
      //    '追加できる': function() { $(this).dialog('close'); }
      },
        show: s,
        hide: s
  });
  /* ダイアログを開きます */
  x.dialog('open');
}
    CSS 
    
<link href="css/jquery-ui.css" rel="stylesheet">
  • explode(爆発の逆なような現れ方)
    • CODE
    HTML 
    
 <a href="javascript:dialogOpen('showとhideのパラメータ','<p>clip(下から上に現れる)</p>',200,200,'clip')">clip(下から上に現れる)</a>
    Javascript 
    
// 下記をbodyの下に読みこませておく！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>
// ### Dialog を開く
// dialogTitle:タイトル
// dialogMsg:メッセージ（HTMLで)
// w: width, h: height, s: アニメーション動作(showとhide)の動きのパラメータ
function dialogOpen(dialogTitle, dialogMsg, w, h, s)
{
  var x = $('<div id="dialog1"></div>').dialog({autoOpen:false});
  x.html(dialogMsg);
  /* ダイアログのオプションを設定して */
  x.dialog('option', {
      title: dialogTitle,
      width:w,
      height:h,
      position: {my: "right bottom", at: "right bottom", of: window},
      buttons: {
          '了解': function() { $(this).dialog('close');
                           //    $(this).dialog("destory").remove()
                             },
      //    '追加できる': function() { $(this).dialog('close'); }
      },
        show: s,
        hide: s
  });
  /* ダイアログを開きます */
  x.dialog('open');
}
    CSS 
    
<link href="css/jquery-ui.css" rel="stylesheet">
  • blind (上から下にスライドして現れる)
    • CODE
    HTML 
    
    <a href="javascript:dialogOpen('showとhideのパラメータ','<p>blind (上から下にスライドして現れる)</p>',400,200,'blind','#list3')"> blind (上から下にスライドして現れる)</a>
    Javascript 
    
// 下記をbodyの下に読みこませておく！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>
// ### Dialog を開く
// dialogTitle:タイトル
// dialogMsg:メッセージ（HTMLで)
// w: width, h: height, s: showとhideの動きのパラメータ
function dialogOpen(dialogTitle, dialogMsg, w, h, s,taishou)
{
  var x = $('<div id="dialog1"></div>').dialog({autoOpen:false});
  x.html(dialogMsg);
  /* ダイアログのオプションを設定して */
  x.dialog('option', {
      title: dialogTitle,
      width:w,
      height:h,
      position: {my: "right bottom", at: "right bottom", of: taishou},
// my:要素自身の基準点を要素内のどの位置にするのかを、” 水平位置　垂直位置 ” の順で指定
//    水平位置の指定値:left center right
//    垂直位置の指定値:top center bottom
// at: of 」で指定された HTML 要素のどの位置に配置するのかを、” 水平位置　垂直位置 ” の順で指定
      buttons: {
          '了解': function() { $(this).dialog('close');
                           //    $(this).dialog("destory").remove()
                             },
      //    '追加できる': function() { $(this).dialog('close'); }
      },
        show: s,
        hide: s
  });
  /* ダイアログを開きます */
  x.dialog('open');
}
    CSS 
    
<link href="css/jquery-ui.css" rel="stylesheet">
  • bounce(弾むように現れる)
    • CODE
    HTML 
    
     <a href="javascript:dialogOpen('showとhideのパラメータ','<p>bounce(弾むように現れる)</p>',400,200,'bounce','#list4')"> bounce(弾むように現れる)</a>
    Javascript 
    
// 下記をbodyの下に読みこませておく！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>
// ### Dialog を開く
// dialogTitle:タイトル
// dialogMsg:メッセージ（HTMLで)
// w: width, h: height, s: showとhideの動きのパラメータ
function dialogOpen(dialogTitle, dialogMsg, w, h, s,taishou)
{
  var x = $('<div id="dialog1"></div>').dialog({autoOpen:false});
  x.html(dialogMsg);
  /* ダイアログのオプションを設定して */
  x.dialog('option', {
      title: dialogTitle,
      width:w,
      height:h,
      position: {my: "right bottom", at: "right bottom", of: taishou},
// my:要素自身の基準点を要素内のどの位置にするのかを、” 水平位置　垂直位置 ” の順で指定
//    水平位置の指定値:left center right
//    垂直位置の指定値:top center bottom
// at: of 」で指定された HTML 要素のどの位置に配置するのかを、” 水平位置　垂直位置 ” の順で指定
      buttons: {
          '了解': function() { $(this).dialog('close');
                           //    $(this).dialog("destory").remove()
                             },
      //    '追加できる': function() { $(this).dialog('close'); }
      },
        show: s,
        hide: s
  });
  /* ダイアログを開きます */
  x.dialog('open');
}
    CSS 
    
<link href="css/jquery-ui.css" rel="stylesheet">
  • drop(左から現れる)
    • CODE
    HTML 
    
   <a href="javascript:dialogOpen('showとhideのパラメータ','<p>drop(左から現れる)</p>',400,200,'drop','#list5')"> drop(左から現れる)</a>
    Javascript 
    
// 下記をbodyの下に読みこませておく！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>
// ### Dialog を開く
// dialogTitle:タイトル
// dialogMsg:メッセージ（HTMLで)
// w: width, h: height, s: showとhideの動きのパラメータ
function dialogOpen(dialogTitle, dialogMsg, w, h, s,taishou)
{
  var x = $('<div id="dialog1"></div>').dialog({autoOpen:false});
  x.html(dialogMsg);
  /* ダイアログのオプションを設定して */
  x.dialog('option', {
      title: dialogTitle,
      width:w,
      height:h,
      position: {my: "right bottom", at: "right bottom", of: taishou},
// my:要素自身の基準点を要素内のどの位置にするのかを、” 水平位置　垂直位置 ” の順で指定
//    水平位置の指定値:left center right
//    垂直位置の指定値:top center bottom
// at: of 」で指定された HTML 要素のどの位置に配置するのかを、” 水平位置　垂直位置 ” の順で指定
      buttons: {
          '了解': function() { $(this).dialog('close');
                           //    $(this).dialog("destory").remove()
                             },
      //    '追加できる': function() { $(this).dialog('close'); }
      },
        show: s,
        hide: s
  });
  /* ダイアログを開きます */
  x.dialog('open');
}
    CSS 
    
<link href="css/jquery-ui.css" rel="stylesheet">
  • fold(左から右に上から下に現れる)
    • CODE
    HTML 
    
     <a href="javascript:dialogOpen('showとhideのパラメータ','<p>fold(左から右に上から下に現れる)</p>',400,200,'fold','#list6')"> fold(左から右に上から下に現れる)</a>
    Javascript 
    
// 下記をbodyの下に読みこませておく！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>
// ### Dialog を開く
// dialogTitle:タイトル
// dialogMsg:メッセージ（HTMLで)
// w: width, h: height, s: showとhideの動きのパラメータ
function dialogOpen(dialogTitle, dialogMsg, w, h, s,taishou)
{
  var x = $('<div id="dialog1"></div>').dialog({autoOpen:false});
  x.html(dialogMsg);
  /* ダイアログのオプションを設定して */
  x.dialog('option', {
      title: dialogTitle,
      width:w,
      height:h,
      position: {my: "right bottom", at: "right bottom", of: taishou},
// my:要素自身の基準点を要素内のどの位置にするのかを、” 水平位置　垂直位置 ” の順で指定
//    水平位置の指定値:left center right
//    垂直位置の指定値:top center bottom
// at: of 」で指定された HTML 要素のどの位置に配置するのかを、” 水平位置　垂直位置 ” の順で指定
      buttons: {
          '了解': function() { $(this).dialog('close');
                           //    $(this).dialog("destory").remove()
                             },
      //    '追加できる': function() { $(this).dialog('close'); }
      },
        show: s,
        hide: s
  });
  /* ダイアログを開きます */
  x.dialog('open');
}
    CSS 
    
<link href="css/jquery-ui.css" rel="stylesheet">
  • slide(左からスライドインする)
    • CODE
    HTML 
    
     <a href="javascript:dialogOpen('showとhideのパラメータ','<p>slide(左からスライドインする)</p>',400,200,'slide','#list7')"> slide(左からスライドインする)</a>
    Javascript 
    
// 下記をbodyの下に読みこませておく！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>
// ### Dialog を開く
// dialogTitle:タイトル
// dialogMsg:メッセージ（HTMLで)
// w: width, h: height, s: showとhideの動きのパラメータ
function dialogOpen(dialogTitle, dialogMsg, w, h, s,taishou)
{
  var x = $('<div id="dialog1"></div>').dialog({autoOpen:false});
  x.html(dialogMsg);
  /* ダイアログのオプションを設定して */
  x.dialog('option', {
      title: dialogTitle,
      width:w,
      height:h,
      position: {my: "right bottom", at: "right bottom", of: taishou},
// my:要素自身の基準点を要素内のどの位置にするのかを、” 水平位置　垂直位置 ” の順で指定
//    水平位置の指定値:left center right
//    垂直位置の指定値:top center bottom
// at: of 」で指定された HTML 要素のどの位置に配置するのかを、” 水平位置　垂直位置 ” の順で指定
      buttons: {
          '了解': function() { $(this).dialog('close');
                           //    $(this).dialog("destory").remove()
                             },
      //    '追加できる': function() { $(this).dialog('close'); }
      },
        show: s,
        hide: s
  });
  /* ダイアログを開きます */
  x.dialog('open');
}
    CSS 
    
<link href="css/jquery-ui.css" rel="stylesheet">

入力を求めるダイアログを表示

jQuery-uiで入力を求める

jQery-uiを使って入力を求めるダイアログを表示し、入力データを取得します。

名前
コメント
CODE
HTML 

     <div>
       <input type="button" id="nyuuryokuBtn" value="入力">
     </div>
     <div id="inDataInfo"></div>
     <!-- 入力ダイアログ  -->
     <div id="inputDialog" title="入力ダイアログ">
       <table>
         <tr>
           <th>名前</th>
           <td><input type="text" id="inputName" size="10" maxlength="10"></td>
         </tr>   
         <tr>
           <th>コメント</th>
           <td><input type="text" id="inputComment" size="20" maxlength="30" /></td>
         </tr>
       </table>
     </div>
Javascript 

// 下記を読みこませておく！
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script src="js/jquery-ui.js"></script>
$(function() {
  // 入力ダイアログを表示
  $("#nyuuryokuBtn").click(function(){
    $("#inputDialog").dialog("open");
    return false;
  });

  // 入力ダイアログを定義
  $("#inputDialog").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      "OK": function() {
        displayMessage("保存しました。（ 名前："
          + $("#inputName").val()
          + "、コメント："
          + $("#inputComment").val()
          + " ）");
        $(this).dialog("close");},
      "Cancel": function() {
        displayMessage("キャンセルしました。");
        $(this).dialog("close");}
    }
  });
});
// 処理メッセージ表示
function displayMessage(str)
{
  $("#inDataInfo").html(str);
}
CSS 

// 下記を読みこませておく
<link href="css/jquery-ui.css" rel="stylesheet">

入力を求めるダイアログを表示2

jQuery-uiで入力を求める2

jQery-uiを使って入力を求めるダイアログを表示し、入力データを取得します。

名前 コメント

名前とコメントを入力して追加ボタンを押してください。

CODE
HTML 

     <table id="jquery-ui-dialog2-table" class="ui-widget ui-widget-content">
      <thead>
       <tr class="ui-widget-header ">
        <th id="table-th-name" width="200px">名前</th>
        <th id="table-th-comment" width="200px">コメント</th>
       </tr>
      </thead>
      <tbody>
      </tbody>
     </table>
     <div class="jquery-ui-button">
      <button id="jquery-ui-dialog2-opener">追加</button>
     </div>
     <!-- ダイアログ部分 -->
     <div id="jquery-ui-dialog2" title="追加">
      <form>
       <fieldset>
        <p>名前とコメントを入力して追加ボタンを押してください。</p>
        <label for="jquery-ui-dialog2-form-name">名前</label>
        <input type="text" name="jquery-ui-dialog2-form-name" id="jquery-ui-dialog2-form-name" class="text ui-widget-content ui-corner-all" />
             
        <p>
         <label for="jquery-ui-dialog2-form-comment">コメント</label>
         <input type="text" name="jquery-ui-dialog2-form-comment" id="jquery-ui-dialog2-form-comment" class="text ui-widget-content ui-corner-all" />
        </p>
       </fieldset>
      </form>
     </div>
Javascript 

// 下記を読みこませておく！
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script src="js/jquery-ui.js"></script>
( function() {
    $( 'button', '.jquery-ui-button' ) . button();
    $( '#jquery-ui-dialog2-opener' ) . click( function() {
        $( '#jquery-ui-dialog2' ) . dialog( 'open' );
    } );
    var name = $( '#jquery-ui-dialog2-form-name' );
    var comment = $( '#jquery-ui-dialog2-form-comment' );
    $( '#jquery-ui-dialog2' ) . dialog( {
        autoOpen: false,
        width: 350,
        show: 'explode',
        hide: 'explode',
        modal: true,
        buttons: {
            '追加': function() {
                if ( name . val() || comment . val() ) {
                    $( '#jquery-ui-dialog2-table tbody' ) . append(
                        '' +
                        '' + name . val() + '' + 
                        '' + comment . val() + '' + 
                        ''
                    ); 
                    $( this ).dialog( 'close' );
                }
                $( this ) . dialog( 'close' );
            },
            'キャンセル': function() {
                $( this ) . dialog( 'close' );
            },
        }
    } );
} );
CSS 

// 下記を読みこませておく
<link href="css/jquery-ui.css" rel="stylesheet">

入力フォームをダイナミックに生成

入力ダイアログをダイナミックに生成する

表示するダイアログをjavascriptで作成して、結果を前項のテーブルに追加する。 入力のダイアログを開く

CODE
HTML 

    <p id="list8">表示するダイアログをjavascriptで作成して、結果を前項のテーブルに追加する。
     <a href="javascript:dialogOpenx('入力のダイアログ','',400,300,'slide','#list8')">入力のダイアログを開く</a>
    </p>
Javascript 

// 下記を読みこませておく！
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script src="js/jquery-ui.js"></script>
function dialogOpenx(dialogTitle, dialogMsg, w, h, s,taishou)
{
 dialogMsg = '<form id="jquery-ui-dialog3-form">' + 
               '<fieldset>' + 
                '<p>名前とコメントを入力して追加ボタンを押してください。</p>' +
                '<label for="jquery-ui-dialog3-form-name">名前：</label>' +
                '<input type="text" name="jquery-ui-dialog3-form-name" id="jquery-ui-dialog3-form-name" class="text ui-widget-content ui-corner-all" />' +
                '<p>' + 
                '<label for="jquery-ui-dialog3-form-comment">コメント：</label>' + 
                '<input type="text" name="jquery-ui-dialog3-form-comment" id="jquery-ui-dialog3-form-comment" class="text ui-widget-content ui-corner-all" />' +
                '</p>' + 
               '</fieldset>' +
              '</form>';
 dialogOpen2(dialogTitle, dialogMsg, w, h, s,taishou);
}
function dialogOpen2(dialogTitle, dialogMsg, w, h, s,taishou)
{

  var x = $('<div id="dialog1"></div>').dialog({autoOpen:false});
  x.html(dialogMsg);
  /* ダイアログのオプションを設定して */
  x.dialog('option', {
      title: dialogTitle,
      width:w,
      height:h,
      show: s,
      hide: s,
      position: {my: "right bottom", at: "right bottom", of: taishou},
// my:要素自身の基準点を要素内のどの位置にするのかを、” 水平位置　垂直位置 ” の順で指定
//    水平位置の指定値:left center right
//    垂直位置の指定値:top center bottom
// at: of 」で指定された HTML 要素のどの位置に配置するのかを、” 水平位置　垂直位置 ” の順で指定
      buttons: {
            '追加': function() {
            var name = $('#jquery-ui-dialog3-form-name');
            var comment = $('#jquery-ui-dialog3-form-comment');
                if (name.val() || comment.val() ) {
                    $( '#jquery-ui-dialog2-table tbody' ).append(
                        '<tr>' +
                        '<td>' + name.val() + '</td>' + 
                        '<td>' + comment.val() + '</td>' + 
                        '</tr>'
                    ); 
                    $( this ).dialog( 'close' );
                    $("#jquery-ui-dialog3-form").remove();
                }
                $( this ) . dialog( 'close' );
            },
            'キャンセル': function() {
                $( this ) . dialog( 'close' );
            },
      },

  });
  /* ダイアログを開きます */
  x.dialog('open');
}
CSS 

// 下記を読みこませておく
<link href="css/jquery-ui.css" rel="stylesheet">