Last active
December 15, 2015 07:39
-
-
Save wildwest-service/5225014 to your computer and use it in GitHub Desktop.
jQueryMobile1.2以降であればdata-role="popup"が使えます。
data-rel="dialog"と似ていますが、ページ遷移ではなくdata-role="page"にネストして書ける、モーダルウィンドウ(Lightbox)のようなものです。
執筆時点で1.3.0が公開されていたため、CDNは1.3.0を読み込んでいます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> | |
| <script src="http://code.jquery.com/jquery-1.7.0.min.js"></script> | |
| <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> | |
| <title>jQueryMobileによるLightbox</title> | |
| </head> | |
| <body> | |
| <div data-role="header"> | |
| <h1>LightboxByJqm</h1> | |
| </div><!-- /header --> | |
| <div data-role="content"> | |
| <!-- モーダル起動ボタン --> | |
| <a href="#popupPhoto" data-rel="popup" data-position-to="window" data-transition="fade">ここに画像やテキストを貼る(タップでモーダルが開きます)</a> | |
| <!-- 表示されるモーダルウィンドウ --> | |
| <div id="popupPhoto" data-role="popup" data-corners="false"> | |
| <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> | |
| <img src="ここに画像パスを入力" alt=""> | |
| </div><!-- /#popupBasic --> | |
| </div><!-- /content --> | |
| <!-- | |
| 複数のモーダルを同一ページに表示したい時には、 | |
| 起動ボタンのhref属性とdivのidを別の名前にする。 | |
| --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment