jquery mobile popup 弹出窗口 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1">
 6 <link rel="stylesheet" type="text/css" href="../jquery.mobile-1.4.5.min.css">
 7 <script type="text/javascript" src="../jquery-1.12.0.min.js"></script>
 8 <script type="text/javascript" src="../jquery.mobile-1.4.5.min.js"></script>
 9 </head>
10 <body>
11     <a href="#pop" data-rel="popup" class="ui-btn">弹出窗口</a>
12     <div data-role="popup" id="pp">
13         <p>这是一个弹出的窗口</p>
14     </div>
15     <!-- 单机按钮后显示原图 -->
16     <a href="#pop" data-rel="popup" data-position-to="window" data-transition="fade">
17     <img src="t01875dcc5d1f47a0c7.jpg" class="pupphoto" style="width: 50px">
18     </a>
19     <div data-role="popup" id="pop">
20         <a href="#" data-rel="back"
21         class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">close</a>
22         <!-- 点击其他地方将当前的对话窗口取消掉date-rel="back"  ui-conrer-all为元素添加圆角 shadow加载阴影，
23     设定主题为a白色，给予图片ui-ico-delete 内容不显示用ui-btn-icon-notext;让按钮显示在右边，ui-btn-right;
24     ui-btn-可以取值为left right none-->
25         <img src="t01875dcc5d1f47a0c7.jpg" class="popphoto" style="height: 440px">
26     </div>
27 </body
28 </html>

单机按钮后显示原图，图片变大

posted @ 2016-03-11 14:09  =DLSS=webZT  阅读(1238)  评论(0)    收藏  举报