form6.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  7. <link rel="stylesheet" href="../css/weui.css"/>
  8. <link rel="stylesheet" href="../css/weuix.css"/>
  9. <script src="../js/zepto.min.js"></script>
  10. <script src="../js/zepto.weui.js"></script>
  11. <script>
  12. $(function(){
  13. });
  14. </script>
  15. </head>
  16. <body ontouchstart>
  17. <div class="page-hd">
  18. <h1 class="page-hd-title">
  19. popup
  20. </h1>
  21. <p class="page-hd-desc"></p>
  22. </div>
  23. <div class='page-bd-15'>
  24. <a href="javascript:;" class="weui-btn weui-btn_primary open-popup" data-target="#full">显示全屏(默认)Popup</a>
  25. <a href="javascript:;" class="weui-btn weui-btn_primary open-popup" data-target="#half">显示底部的Popup</a>
  26. <a href="javascript:;" id='n' class="weui-btn weui-btn_primary">显示通知</a>
  27. </div>
  28. <div id="full" class='weui-popup__container'>
  29. <div class="weui-popup__overlay"></div>
  30. <div class="weui-popup__modal">
  31. 内容
  32. <a href="javascript:;" class="weui-btn weui-btn_primary close-popup">关闭</a>
  33. </div>
  34. </div>
  35. <div id="half" class='weui-popup__container popup-bottom'>
  36. <div class="weui-popup__overlay"></div>
  37. <div class="weui-popup__modal">
  38. <div class="toolbar">
  39. <div class="toolbar-inner">
  40. <a href="javascript:;" class="picker-button close-popup">关闭</a>
  41. <h1 class="title">标题</h1>
  42. </div>
  43. </div>
  44. <div class="modal-content">
  45. 内容
  46. </div>
  47. </div>
  48. </div>
  49. <script>
  50. $(document).on("open", ".weui-popup-modal", function() {
  51. console.log("open popup");
  52. }).on("close", ".weui-popup-modal", function() {
  53. console.log("close popup");
  54. });
  55. /* $("#about").popup();打开
  56. $.closePopup() ;关闭*/
  57. $(document).on("click", "#n", function() {
  58. $.noti({
  59. title: "中奖啦!",
  60. text: "点击领取红包!",
  61. // media: "<img src='./images/present.png' />",
  62. data: {
  63. message: "没有!"
  64. },
  65. time: 3000,
  66. onClick: function(data) {
  67. $.alert(data.message);
  68. }
  69. });
  70. });
  71. </script>
  72. <br>
  73. <br>
  74. <div class="weui-footer weui-footer_fixed-bottom">
  75. <p class="weui-footer__links">
  76. <a href="../index.html" class="weui-footer__link">WeUI首页</a>
  77. </p>
  78. <p class="weui-footer__text">Copyright &copy; Yoby</p>
  79. </div>
  80. </body>
  81. </html>