やっぱりPopupも必要 - とりあえず書きなぐる

ポップアップを拡張してみます

/Src/cm.css

/* 
  Popup 
*/
.ui-popup > .ui-header:after,
.ui-popup > .ui-footer:after {
  content: "";
  clear: both;
  display: block;
}

ポップアップにヘッダ、フッタを付けたときのfloat対策です

/Src/cm.ts
namespace cmを追加してメソッド追加

namespace cm {
    "use strict";

    export function getScrollTop() {
        return document.documentElement.scrollTop || document.body.scrollTop;
    }

    export function getActivePageId(): string {
        let pg = getActivePage();
        if ((pg) && (pg[0])) {
            return pg[0].id;
        }
        return "";
    }

    export function getActivePage(): JQuery {
        return $.mobile.pageContainer.pagecontainer("getActivePage");
    }
}

/Src/cm.ts
元のポップアップオプションにいくつか追加

/*
 * ポップアップ
 */
interface PopupOptions {
    arrow?: boolean;
    positionFixed?: boolean;                                     // 位置固定
    restoreScrollPos?: boolean;	                                // スクロール位置復元
    focusSelector?: string | JQuery;                           // フォーカス指定
    closeButton?: boolean;                                       // 閉じるボタン付加
    onHeightOverflow?(overflow: boolean): any;     // 高さ食み出しイベント
    onClosed?: any;                                                  // 終了イベント
}

続けて実装

namespace Popup {
    "use strict";

    /*
     * コンテナ取得
     */
    export function getContainer(selector: string | JQuery): JQuery {
        return $(selector).closest(".ui-popup-container");
    }

    /*
     * オープン
     */
    export function open(selector: string | JQuery, options?: PopupOptions): JQuery {
        let pos: number = undefined;

        let target = $(selector);
        let Container = getContainer(target);

        // 閉じるボタン追加
        if (options && options.closeButton) {
            target.css("padding-top", "2em");

            let btn = $("<button>");
            btn.addClass("ui-btn ui-btn-icon-notext ui-icon-delete ui-popup-close");
            btn.css({
                "position": "absolute"
                , "margin": "0.3em"
                , "top": 0
                , "right": 0
                , "left": "auto"
                , "bottom": "auto"
                , "padding": 0
            });
            target.append(btn);
        }

	/*
	 * 位置変更
	 */
        target.off("popupbeforeposition").on("popupbeforeposition", function (event: Event, data: any) {
            // 位置固定
            if (options && options.positionFixed) {
                // Container.css("position", "fixed");
            }
            // 位置指定
            if (options && options.positionTo) {
                delete data.x;
                delete data.y;
                data.positionTo = options.positionTo;	// リサイズ時の位置復元
            }
            // 高さオーバーフローイベント
            if (options && options.onHeightOverflow) {
                let winH = $(window).height();
                let itmH = target.outerHeight();

                let overflow = false;
                if (itmH >= winH) {
                    overflow = true;
                }
                options.onHeightOverflow(overflow); // コールバック
            }
        });

	/*
	 * オープン後
	 */
        target.off("popupafteropen").on("popupafteropen", function (event: Event) {
            // フォーカス指定
            if (options && options.focusSelector) {
                let itm = $(options.focusSelector);
                itm.focus();
            }
            // 位置固定
            if (options && options.positionFixed) {
                Container.css({
                    "position": "fixed"
                    , "margin-top": -cm.getScrollTop()
                });
            }
            $(window).resize();
        });

	/*
	 * クローズ
	 */
        target.off("popupafterclose").on("popupafterclose", function (event: Event) {
            // スクロール位置復元
            if (isNaN(pos) === false) {
                $.mobile.silentScroll(pos);
            }
            // 終了イベント
            if (options && options.onClosed) {
                options.onClosed();			// コールバック
            }
            // イベントハンドラ破棄
            target.off("popupbeforeposition")
                .off("popupafteropen")
                .off("popupafterclose");

            // コンテナ位置設定削除
            Container.css("position", "");

            target = null;
            Container = null;
        });

        // スクロール位置保持
        if (options && options.restoreScrollPos) {
            pos = cm.getScrollTop();
        }

        // オープン
        if (!options) {
            options = { transition: "fade" };
        } else {
            if (!options.transition) {
                options.transition = "fade";
            }
        }
        target.popup(options).popup("open", options);
        return target;
    }

    /*
     * クローズ
     */
    export function close(): boolean {
        if ($(".ui-popup").isVisible() === true) {
            $(".ui-popup").popup("close");
            return true;
        }
        return false;
    }

    export function isActive(id?: string): boolean {
        if (id) {
            return ($("#" + id + "-popup.ui-popup-active").length > 0);
        } else {
            return ($(".ui-popup-active").length > 0);
        }
    }

    /*
     * クローズボタン押下
     */
    $(document).on("click", ".ui-btn.ui-popup-close", function (event: Event) {
        Popup.close();
    });
}

ついでにありがちなメッセージボックス

namespace cm {
    ....

    export class MsgBallon {
        onClosed(result: boolean) { ; };

        constructor(message: string, positionTo: any, hasCancel?: boolean) {
            let scope = this;

            let content = "";
            content += "<div";
            content += " data-role='popup'";
            content += " data-history='false'";
            content += " data-overlay-theme='a'";
            content += ">";

            content += " <div role='main' class='ui-content'>";
            content += "  <p>" + message + "</p>";
            content += " </div>";

            content += " <div data-role='footer' style=text-align:right;padding:0.3em;>";
            content += "  <a href='#' class='ui-btn ui-btn-inline ui-btn-active' cmd='apply'>OK</a>";
            if (hasCancel) {
                content += "  <a href='#' class='ui-btn ui-btn-inline' cmd='cancel'>キャンセル</a>";
            }
            content += " </div>";
            content += "</div>";

            // 作成
            let box = $(content)
                .appendTo(cm.getActivePage())
                .enhanceWithin()
                .popup();

            // ボタン押下
            let result = false;
            box.find(".ui-btn").off("click").on("click", function (event: Event) {
                let cmd = $(this).attr("cmd");
                switch (cmd) {
                    case "apply":
                        result = true;
                        box.popup("close");
                        break;

                    case "cancel":
                        box.popup("close");
                        break;
                }
            });

            // 表示
            Popup.open(box, {
                transition: "pop"
                , positionTo: positionTo
                , arrow: true
                , closeButton: true
                , onClosed: function () {
                    scope.onClosed(result);
                    box.remove();
                }
            });
        }
    }

    export namespace MsgBallon {
        export function show(message: string, positionTo: any, hasCancel?: boolean) {
            return new MsgBallon(message, positionTo, hasCancel);
        }
    }

    export class MsgBox {
        onClosed(result: boolean) { ; };

        constructor(message: string, title: string, hasCancel?: boolean) {
            let scope = this;

            let content = "";
            content += "<div";
            content += " data-role='popup'";
            content += " data-history='false'";
            content += " data-overlay-theme='b'";
            content += " data-dismissible='false'";
            content += ">";

            content += " <div data-role='header'>";
            content += "  <h1>" + title + "</h1>";
            content += " </div>";

            content += " <div role='main' class='ui-content'>";
            content += "  <p style='text-align:center;'>" + message + "</p>";
            content += " </div>";

            content += " <div data-role='footer' style=text-align:center;padding:0.3em;>";
            content += "  <a href='#' class='ui-btn ui-btn-inline ui-btn-active' cmd='apply'>OK</a>";
            if (hasCancel) {
                content += "  <a href='#' class='ui-btn ui-btn-inline' cmd='cancel'>キャンセル</a>";
            }
            content += " </div>";
            content += "</div>";

            // 作成
            let box = $(content)
                .appendTo(cm.getActivePage())
                .enhanceWithin()
                .popup();

            // ボタン押下
            let result = false;
            box.find(".ui-btn").off("click").on("click", function (event: Event) {
                let cmd = $(this).attr("cmd");
                switch (cmd) {
                    case "apply":
                        result = true;
                        box.popup("close");
                        break;

                    case "cancel":
                        box.popup("close");
                        break;
                }
            });

            // 表示
            Popup.open(box, {
                transition: "pop"
                , onClosed: function () {
                    scope.onClosed(result);
                    box.remove();
                }
            });
        }
    }

    export namespace MsgBox {
        export function show(message: string, title: string, hasCancel?: boolean) {
            return new MsgBox(message, title, hasCancel);
        }
    }
}

動的に作成します
enhanceWithin()でdata-***がclassに展開されるようです

サンプル
内容は殴り書きです
SubWindow→Popupも用意しました
/Views/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 data-role="popup" data-history="false" id="popup0" data-arrow="true" data-overlay-theme="b">
      <p>ポップアップ</p>
    </div>

    <div data-role="popup" data-history="false" id="popup1">
      <ul data-role="listview" data-icon="false">
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
        <li><a href="#">メニュー4</a></li>
      </ul>
    </div>

    <div data-role="popup" data-history="false" id="popup2" data-overlay-theme="b" data-dismissible="false">
      <div data-role="header">
        <h1>Header</h1>
        <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-popup-close ui-btn-right"></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 role="main" class="ui-content">
        <ul data-role="listview" data-inset="true" data-icon="false" class="split">
          <li>
            <div class="ui-field-contain em7">
              <label for="text-121">Text input:</label>
              <div>
                <input name="text-121" id="text-121" 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 data-role="footer">
        <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="#" class="ui-btn ui-popup-close">キャンセル</a>
          </div>
        </div>
      </div>
    </div>

    <div data-role="popup" data-history="false" id="popup3" data-arrow="true">
      <ul data-role="listview" data-icon="false">
        <li><a href="#">アイテム1</a></li>
        <li><a href="#">アイテム2</a></li>
        <li><a href="#">アイテム3</a></li>
        <li><a href="#">アイテム4</a></li>
        <li><a href="#">アイテム5</a></li>
        <li><a href="#">アイテム6</a></li>
        <li><a href="#">アイテム7</a></li>
        <li><a href="#">アイテム8</a></li>
        <li><a href="#">アイテム9</a></li>
        <li><a href="#">アイテム10</a></li>
      </ul>
    </div>

    <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" id="sublist1">
            <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" cmd="popup3"></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 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">ボタン2</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" id="popupMenu">
        <li data-role="list-divider">ポップアップ</li>
        <li><a href="#" cmd="popup0">素</a></li>
        <li><a href="#" cmd="popup0.1">Popup</a></li>
        <li><a href="#" cmd="popup1">メニュー</a></li>
        <li><a href="#" cmd="popup2">素ダイアログ</a></li>
        <li><a href="#" cmd="popup2.1">ダイアログ</a></li>
        <li><a href="#" cmd="msgbox">メッセージボックス</a></li>
        <li><a href="#" cmd="msgballon">メッセージバルーン</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";

    namespace Page1 {
        $(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
            }
        });

        $(document).on("click", "#popupMenu > li > .ui-btn", function (event: Event) {

            let cmd = $(this).attr("cmd");
            switch (cmd) {
                case "popup0":
                    $("#popup0").popup("open", { positionTo: this });
                    break;
                case "popup0.1":
                    Popup.open("#popup0", { positionTo: this, restoreScrollPos: true });
                    break;

                case "popup1":
                    Popup.open("#popup1", {
                        positionTo: this
                        , arrow: true
                        , restoreScrollPos: true
                        , closeButton: true
                        , onClosed: function () {
                            console.log("Popup Closed");
                        }
                    });
                    break;
                case "popup2":
                    $("#popup2").popup("open", { positionTo: null });
                    break;

                case "popup2.1":
                    Popup.open("#popup2", {
                        positionTo: this
                        , restoreScrollPos: true
                        , focusSelector: "#text-121"
                    });
                    break;

                case "msgbox":
                    {
                        let msg = cm.MsgBox.show("メッセージ・メッセージ・メッセージ<br>宜しいですか？", "確認", true);
                        msg.onClosed = function (result: boolean) {
                            if (result === true) {
                                alert("OK");
                            }
                        };
                    }
                    break;

                case "msgballon":
                    cm.MsgBallon.show("メッセージ・メッセージ・メッセージ", this);
                    break;
            }
        });

        namespace SubWindow1 {

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

            $(document).on("click", "#sublist1 > li > .ui-btn", function (event: Event) {

                let cmd = $(this).attr("cmd");
                switch (cmd) {
                    case "popup3":
                        let dlg = $("#popup3");

                        Popup.open(dlg, {
                            positionTo: this
                            , positionFixed: true
                            , closeButton: true
                            , onHeightOverflow: function (overflow: boolean) {

                                if (overflow) {
                                    dlg.offset().top = 0;
                                    dlg.outerHeight($(window).height());
                                    dlg.find("ul.ui-listview").css({
                                        "overflow-y": "scroll"
                                        , "height": "100%"
                                    });
                                } else {
                                    dlg.find("ul.ui-listview").css({
                                        "overflow-y": "hidden"
                                        , "height": ""
                                    });
                                    dlg.css({
                                        "height": ""
                                        , "top": ""
                                    });
                                }
                            }
                        });
                        break;
                }
            });
        }

        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" });
            }
        }

    }
}