しがないプログラマーの備忘録: Popup位置

2013年4月18日木曜日

Popup位置

【目的】
jQuery Mobile1.3.1でポップアップの開く位置を指定します。

【準備】
１．「jQuery Mobile1.3.1の使用方法(画像が必要な場合)」の手順の通り、jQuery Mobileに必要なファイルを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="jquery.mobile-1.3.1.min.css" />
</head>
<body>
    <a href="#popup1" data-rel="popup" data-role="button" data-inline="true" data-position-to="window">ポップアップ１起動</a>
    <div data-role="popup" id="popup1">
        <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">閉じる</a>
        <p>ポップアップ１の中身。</p>
    </div>

    <a href="#popup2" data-rel="popup" data-role="button" data-inline="true" data-position-to="origin">ポップアップ２起動</a>
    <div data-role="popup" id="popup2">
        <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-left">閉じる</a>
        <p>ポップアップ２の中身。</p>
    </div>

    <a href="#popup3" data-rel="popup" data-role="button" data-inline="true" data-position-to="#popup3-open-position">ポップアップ３起動</a>
    <div data-role="popup" id="popup3">
        <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-left">閉じる</a>
        <p>ポップアップ３の中身。</p>
    </div>
    
    <br />
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
    6<br />
    7<br />
    8<br />
    9<br />
    10<br />
    
    <div id="popup3-open-position">POPUP3のオープン位置</div>

    <script src="jquery-1.9.1.min.js"></script>
    <script src="jquery.mobile-1.3.1.min.js"></script>
</body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。