More than 5 years have passed since last update.

jQuery Mobileの勉強 − ポップアップ表示

jQueryMobile

Posted at 2014-08-19

#ポップアップ

data-role="popup"を指定すること。
aタグで閉じるボタンなどを表示できます。

<div id="popup-message" data-role="popup">
  <a href="#" class="ui-btn-right"
    data-role="button" data-rel="back"
    data-icon="delete" data-iconpos="notext">閉じる</a>
  <p class="ui-content">ポップアップが表示されました</p>
</div>

#ポップアップの呼び出し

data-position-to="window"と指定すると画面中央にポップアップを表示できます。
data-toleranceで任意のマージンを指定することもできます。

<a href="#popup-message" data-rel="popup" data-position-to="window">
    ポップアップを表示
</a>

#サンプルコード

<!DOCTYPE html> 
<html lang="ja"> 
  <head> 
    <title>Page Title</title> 
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
  </head> 
  <body> 
    <section id="page" data-role="page">
      <header data-role="header">
          <h3>jQuery Mobile</h3>
      </header>
      <article data-role="content">
        <h3>jQuery Mobileのページ</h3>
        <p>
          <a href="#popup-message" data-rel="popup" data-position-to="window">
            ポップアップを表示
          </a>
        </p>    
      </article>
      <footer data-role="footer">
        <h3>Footer</h3>
      </footer>
      <!--  ポップアップ -->
      <div id="popup-message" data-role="popup">
        <a href="#" class="ui-btn-right"
          data-role="button" data-rel="back"
          data-icon="delete" data-iconpos="notext">閉じる</a>
        <p class="ui-content">ポップアップが表示されました</p>
      </div>
    </section>
  </body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up