一、弹框
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script> </head> <body> <a href="#pop" data-rel="popup" class="ui-btn">弹出窗口</a> <div data-role="popup" id="pp"> <p>这是一个弹出的窗口</p> </div> <!-- 单机按钮后显示原图 --> <a href="#pop" data-rel="popup" data-position-to="window" data-transition="fade"> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2350302849,3323337377&fm=26&gp=0.jpg" class="pupphoto" style=" 50px"> </a> <div data-role="popup" id="pop"> <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">close</a> <!-- 点击其他地方将当前的对话窗口取消掉date-rel="back" ui-conrer-all为元素添加圆角 shadow加载阴影, 设定主题为a白色,给予图片ui-ico-delete 内容不显示用ui-btn-icon-notext;让按钮显示在右边,ui-btn-right; ui-btn-可以取值为left right none--> <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1027226132,3015755721&fm=26&gp=0.jpg" class="popphoto" style="height: 440px"> </div> </body </html>