とりあえず書きなぐる

とりあえず、マイノリティーなプログラムを極力説明せずに書きなぐります

子ウィンドウを作ってみる

プログラム jQuery jQuery Mobile TypeScript

本題の子ウィンドウを作成します
f:id:vzc00525:20190502142624p:plain
理屈は簡単で、半透明のオーバーラップ用div(position: fixed)の内側にウィンドウ枠となるdiv(position: relative)だけです
クラスは.ui-subwindowとします
/Src/cm.css

/* 
  Subwindow 
*/
div.ui-subwindow,
div.ui-subwindow > div{
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
div.ui-subwindow {    /* Overlay*/
  display: none;
  z-index: 1001;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  padding: 1em 5%;  
}
  div.ui-subwindow.static.left {
    padding-left: 1em;
  }
  div.ui-subwindow.static.right {
    padding-right: 1em;
  }

  div.ui-subwindow > div {    /* Window */
    background-color: #fff;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
  }

  div.ui-subwindow.static > div {
    height: auto;
  }
  div.ui-subwindow.static.left > div {
    margin-left: 0;
  }
  div.ui-subwindow.static.right > div {
    margin-right: 0;
  }
  div.ui-subwindow div.ui-header,
  div.ui-subwindow div.ui-content,
  div.ui-subwindow div.ui-footer {
    position: absolute;
    left: 0;
    right: 0;
    border-color:#ddd;
  }
  div.ui-subwindow.static div.ui-header,
  div.ui-subwindow.static div.ui-content,
  div.ui-subwindow.static div.ui-footer {
    position: static;
  }

  div.ui-subwindow div.ui-header {
    top: 0;
    border-top-width: 0;
  }
  div.ui-subwindow div.ui-content {
    top: 0;
    bottom: 0;
    overflow: hidden;
  }
  div.ui-subwindow div.ui-content > ul.ui-listview {
    margin: 0;
    height: 100%;
    overflow-y: auto;
    border: 1px solid #ddd;
  }
    div.ui-subwindow div.ui-content > ul.ui-listview > li:first-child > a,
    div.ui-subwindow div.ui-content > ul.ui-listview > li.ui-li-static:first-child {
      border-top-width: 0;
    }
  div.ui-subwindow div.ui-footer {
    bottom: 0;
  }
  div.ui-subwindow .ui-header:after,
  div.ui-subwindow .ui-footer:after {
    content: "";
    clear: both;
    display: block;
  }

ウィンドウは外枠に合わせるのを基本として、staticでコンテンツに合わせて上詰めとします

  • ui-subwindow
  • ui-subwindow static
  • ui-subwindow static left
  • ui-subwindow static right

一応最大幅を設定
header、content、footer、content内は大抵ListViewなのでその分を用意しておきます

HTMLはこんな感じでpage内に配置します

    <div class="ui-subwindow">
      <div>
        <div class="ui-header">
          <h1 class="ui-title">Header</h1>
          </div>
        </div>
        <div class="ui-content">
          <ul data-role="listview" data-icon="false" class="split">
            <li>
            </li>
          </ul>
        </div>
        <div class="ui-footer">
        </div>
      </div>
   </div>

SubWindowを操作するメソッドを作成します
/Src/cm.ts

/*
 * サブウィンドウ
 */
interface SubWindowOptions {
	unUseCancel?: boolean;			// キャンセル禁止
	focusSelector?: string | JQuery;	// フォーカス指定
	onClosed?: any;				// 終了イベント
}

namespace SubWindow {
	"use strict";
	let _options: SubWindowOptions = {};
	/*
	 * 表示判定
	 */
	export function isVisible(): boolean {
		return $(".ui-subwindow").isVisible();
	}
	/*
	 * 表示
	 */
	export function show(selector: string | JQuery, options?: SubWindowOptions): JQuery {
		if (options) {
			_options = options;
		}
		let target = $(selector);
		let inner = target.children("div").hide();
		target.show();
		inner.fadeIn();
		$(window).resize();
		if (_options && _options.focusSelector) {
			$(_options.focusSelector).focus();
		}
		return target;
	}
	/*
	 * 終了
	 */
	export function close() {
		$(".ui-subwindow").hide();
		if (_options && _options.onClosed) {
			_options.onClosed();	// コールバック
		}
	}
	/*
	 * サイズ変更
	 */
	$(window).on("resize", function (event: Event) {
		let w = $(".ui-subwindow:visible");
		if (w.length > 0) {
			if (w.hasClass("static") === false) {
				let content = w.find(".ui-content");
				if (content.length > 0) {
				let hd = w.find(".ui-header").outerHeight();
				let ft = w.find(".ui-footer").outerHeight();
					content.css({ "margin-top": hd, "margin-bottom": ft });
				}
			}
		}
	});
	/*
	 * キーボード操作
	 */
	$(window).on("keyup", function (event: JQueryKeyEventObject) {
		if (event.keyCode === 27) {			// ESC
			let w = $(".ui-subwindow:visible");
			if (w.length > 0) {
				if (!_options || !(_options.unUseCancel)) {
					close();
				}
			}
		}
	});
	/*
	 * オーバーレイクリック
	 */
	$(document).on("click", ".ui-subwindow.ui-dismissible", function (event: Event) {
		if (event.target === this) {
			if (!_options || !(_options.unUseCancel)) {
				close();
			}
		}
	});
	/*
	 * 終了ボタン押下
	 */
	$(document).on("click", ".ui-btn.ui-subwindow-close", function (event: Event) {
		if (!_options || !(_options.unUseCancel)) {
			close();
		}
	});
}

サンプル
/View/Home/Index.vbhtml

<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta charset="utf-8" />

  <link rel="stylesheet" href="@Url.Content("~/Content/jquery.mobile-1.4.5.min.css")" />
  <link rel="stylesheet" href="@Url.Content("~/Src/cm.css")" />
  <link rel="stylesheet" href="@Url.Content("~/Src/app.css")" />

  <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.1.3.min.js")"></script>
  <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.mobile-1.4.5.min.js")"></script>
  <script type="text/javascript" src="@Url.Content("~/Src/cm.js")"></script>
  <script type="text/javascript" src="@Url.Content("~/Src/home.js")"></script>

  <style type="text/css">
    .menu {
      width: 20em;
      float: left;
      margin-left: 1em!important;
    }

    ul.ui-listview > li.ui-li-divider,
    div.ui-header > .ui-title {
      border-color: blue;
      background-color: blue;
      color: white;
    }

    .ui-flipswitch-active.ui-flipswitch,   
    .ui-btn-active {
      border-color: blue !important;
      background-color: blue !important;
    }

    #page1 > .ui-header > .ui-title {
      padding-right: 10.5em;
    }

  </style>

</head>
<body class="ui-nodisc-icon ui-alt-icon ui-desktop">
  <div data-role="page" id="page1">

    <div id="subwindow3" class="ui-subwindow static left">
      <div style="max-width:500px;">
        <div class="ui-content">
          <div class="ui-field-contain em5">
            <label for="text-14">Text input:</label>
            <div>
              <input name="text-14" id="text-14" type="text" value="">
            </div>
          </div>
        </div>
        <div class="ui-footer">
          <div class="ui-toolbar">
            <div class="ui-right-panel">
              <a href="#" class="ui-btn ui-btn-active">OK</a>
              <a href="#" class="ui-btn ui-subwindow-close">キャンセル</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="subwindow2" class="ui-subwindow ui-dismissible">
      <div>
        <div class="ui-header">
          <h1 class="ui-title">Header</h1>
          <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-subwindow-close ui-btn-right"></a>
        </div>
        <div class="ui-content">
          <ul data-role="listview" id="subwindow2_list" >
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div id="subwindow1" class="ui-subwindow">
      <div>
        <div class="ui-header">
          <h1 class="ui-title">Header</h1>
          <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-subwindow-close ui-btn-right"></a>
          <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-subwindow-close ui-btn-left"></a>
          <div class="ui-toolbar" id="toolbar2">
            <div class="ui-left-panel">
              <div class="ui-toolbar-divider">
                <a href="#" class="ui-btn ui-btn-icon-left ui-icon-star">ボタン5</a>
              </div>
            </div>
            <div class="ui-right-panel">
              <div class="ui-toolbar-divider">
                <a href="#" class="ui-btn ui-btn-icon-left ui-icon-action ui-btn-active">ボタン6</a>
                <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-gear">ボタン7</a>
              </div>
              <div class="ui-toolbar-divider">
                <a href="#" class="ui-btn">ボタン8</a>
                <a href="#" class="ui-btn">ボタン9</a>
                <a href="#" class="ui-btn">ボタン10</a>
              </div>
              <div class="ui-toolbar-divider">
                <a href="#" class="ui-btn">ボタン11</a>
                <a href="#" class="ui-btn">ボタン12</a>
              </div>
            </div>
          </div>
        </div>
        <div class="ui-content">
          <ul data-role="listview" data-icon="false" class="split">
            <li>
              <div class="ui-field-contain em7">
                <label for="text-12">Text input:</label>
                <div>
                  <input name="text-12" id="text-12" type="text" value="">
                </div>
              </div>
              <button class="ui-btn ui-btn-icon-notext ui-btn-split ui-icon-carat-d"></button>
            </li>
            <li>
              <div class="ui-field-contain em7">
                <label for="text-13">Text input clr:</label>
                <div>
                  <input name="text-13" id="text-13" type="text" value="" data-clear-btn="true">
                </div>
              </div>
            </li>
            <li>
              <div class="ui-field-contain em7">
                <label for="search-8">Search:</label>
                <div>
                  <input name="search-8" id="search-8" type="search" value="">
                </div>
              </div>
            </li>
            <li>
              <div class="ui-field-contain em7">
                <label for="textarea-12">Textarea:</label>
                <div>
                  <textarea name="textarea-12" id="textarea-12" rows="8" cols="40"></textarea>
                </div>
              </div>
              <button class="ui-btn ui-btn-icon-notext ui-btn-split ui-icon-delete"></button>
            </li>
            <li>
              <div class="ui-field-contain em7">
                <label for="Switch">Flip switch:</label>
                <div>
                  <input name="flip-checkbox-1" id="flip-checkbox-1" type="checkbox" data-role="flipswitch">
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="ui-footer">
          <div class="ui-toolbar">
            <div class="ui-left-panel">
              <a href="#" class="ui-btn">ボタン3</a>
            </div>
            <div class="ui-right-panel">
              <a href="#" class="ui-btn ui-btn-active">OK</a>
              <a href="#" class="ui-btn ui-subwindow-close">キャンセル</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="subwindow0" class="ui-subwindow ui-dismissible" title="オーバーレイ">
      <div title="ウィンドウ">
        <div class="ui-header">
          <h1 class="ui-title">Header</h1>
        </div>
        <div class="ui-content">
        </div>
        <div class="ui-footer">
          <h1 class="ui-title">Footer</h1>
        </div>
      </div>
    </div>

    <div data-role="header" data-position="fixed" data-fullscreen="false" data-tap-toggle="false">
      <h1 class="ui-icon ui-icon-home-w ui-title-left">HeaderHeaderHeaderHeaderHeaderHeader</h1>
      <div class="ui-right-panel">
        <a href="#page2" class="ui-btn">ダイアログページ</a>
        <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-delete"></a>
      </div>
      <div class="ui-toolbar" id="toolbar1">
        <div class="ui-left-panel">
          <div class="ui-toolbar-divider">
            <a href="#" class="ui-btn ui-btn-icon-left ui-icon-star">star</a>
            <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-star"></a>
            <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-alert"></a>
          </div>
        </div>
        <div class="ui-right-panel">
          <div class="ui-toolbar-divider">
            <a href="#" class="ui-btn ui-btn-icon-left ui-icon-action ui-btn-active">Active</a>
            <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-gear"></a>
          </div>
          <div class="ui-toolbar-divider">
            <a href="#" class="ui-btn">ボタン</a>
            <a href="#" class="ui-btn ui-btn-icon-left ui-icon-search">Search</a>
            <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-search"></a>
          </div>
          <div class="ui-toolbar-divider">
            <a href="#" class="ui-btn ui-btn-icon-left ui-icon-edit">Edit</a>
            <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-edit"></a>
          </div>
        </div>
      </div>
    </div>
    <div role="main" class="ui-content">
      <ul data-role="listview" data-inset="true" data-icon="false" class="menu" id="subwindowMenu">
        <li data-role="list-divider">サブウィンドウ</li>
        <li><a href="#" cmd="subwin0">素</a></li>
        <li><a href="#" cmd="subwin1">ダイアログ</a></li>
        <li><a href="#" cmd="subwin2">リスト</a></li>
        <li><a href="#" cmd="subwin3">Input</a></li>
      </ul>
      <ul data-role="listview" data-inset="true" data-icon="false" class="menu">
        <li data-role="list-divider">Menu2</li>
        <li><a href="#">AA</a></li>
        <li><a href="#">BB</a></li>
        <li><a href="#">CC</a></li>
        <li><a href="#">DD</a></li>
        <li><a href="#">EE</a></li>
        <li><a href="#">FF</a></li>
        <li><a href="#">GG</a></li>
        <li><a href="#">HH</a></li>
        <li><a href="#">II</a></li>
        <li><a href="#">JJ</a></li>
        <li><a href="#">KK</a></li>
      </ul>
      <ul data-role="listview" data-inset="true" data-icon="false" class="menu">
        <li data-role="list-divider">Menu3</li>
        <li><a href="#">AAA</a></li>
        <li><a href="#">BBB</a></li>
      </ul>
    </div>
    <div data-role="footer" data-position="fixed" data-fullscreen="false" data-tap-toggle="false">
      <div class="ui-toolbar">
        <div class="ui-left-panel">
          <a href="#" class="ui-btn">ボタン3</a>
        </div>
        <div class="ui-right-panel">
          <a href="#" class="ui-btn ui-btn-active">OK</a>
          <a href="#" class="ui-btn">キャンセル</a>
        </div>
      </div>
    </div>
  </div>

  <div data-role="page" id="page2">
    <div data-role="header" data-position="fixed" data-fullscreen="false" data-tap-toggle="false">
      <h1>Dialog</h1>
      <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-video">ボタン1</a>
    </div>

    <div role="main" class="ui-content ui-form">
      <ul data-role="listview" data-inset="true" data-icon="false" class="split">
        <li>
          <div class="ui-field-contain em7">
            <label for="text-12">Text input:</label>
            <div>
              <input name="text-12" id="text-12" type="text" value="">
            </div>
          </div>
          <button class="ui-btn ui-btn-icon-notext ui-btn-split ui-icon-carat-d"></button>
        </li>
        <li>
          <div class="ui-field-contain em7">
            <label for="text-13">Text input clr:</label>
            <div>
              <input name="text-13" id="text-13" type="text" value="" data-clear-btn="true">
            </div>
          </div>
        </li>
        <li>
          <div class="ui-field-contain em7">
            <label for="search-8">Search:</label>
            <div>
              <input name="search-8" id="search-8" type="search" value="">
            </div>
          </div>
        </li>
        <li>
          <div class="ui-field-contain em7">
            <label for="textarea-12">Textarea:</label>
            <div>
              <textarea name="textarea-12" id="textarea-12" rows="8" cols="40"></textarea>
            </div>
          </div>
          <button class="ui-btn ui-btn-icon-notext ui-btn-split ui-icon-delete"></button>
        </li>
        <li>
          <div class="ui-field-contain em7">
            <label for="Switch">Textarea:</label>
            <div>
              <input name="flip-checkbox-1" id="flip-checkbox-1" type="checkbox" data-role="flipswitch">
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div data-role="footer" data-position="fixed" data-fullscreen="false" data-tap-toggle="false">
      <div class="ui-toolbar">
        <div class="ui-left-panel">
          <a href="#" class="ui-btn">リセット</a>
        </div>
        <div class="ui-right-panel">
          <a href="#" class="ui-btn ui-btn-active">OK</a>
          <a href="#page1" class="ui-btn">キャンセル</a>
        </div>
      </div>
    </div>

  </div>
</body>
</html>

/Src/home.ts

/// <reference path="../scripts/typings/jquery/jquery.d.ts" />
/// <reference path="../scripts/typings/jquerymobile/jquerymobile.d.ts" />

namespace Home {
    "use strict";

    $(document).on("click", "#subwindowMenu > li > .ui-btn", function (event: Event) {
        let cmd = $(this).attr("cmd");
        switch (cmd) {
            case "subwin0":
                SubWindow.show("#subwindow0");
                break;
            case "subwin1":
                SubWindow1.show();
                break;
            case "subwin2":
                SubWindow2.show();
                break;
            case "subwin3":
                SubWindow3.show();
                break
        }
    });

    namespace SubWindow1 {
        export function show() {
            let w = $("#subwindow1");
            SubWindow.show(w);
            w.find("textarea").change();	// textareaサイズ正常化
        }
    }

    namespace SubWindow2 {
        export function show() {
            let w = $("#subwindow2");
            SubWindow.show(w);
        }
        $(document).on("click", "#subwindow2_list > li > .ui-btn", function (event: Event) {
            SubWindow.close();
        });
    }

    namespace SubWindow3 {
        export function show() {
            let w = $("#subwindow3");
            SubWindow.show(w, { focusSelector: "#text-14" });
        }
    }

}

ウィンドウ１個だけという制限は同じで