| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>自定义弹出层</title>
- <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
- <link rel="stylesheet" href="../style/weui.css"/>
- <link rel="stylesheet" href="../style/weui2.css"/>
- <link rel="stylesheet" href="../style/weui3.css"/>
- <script src="../zepto.min.js"></script>
- </head>
- <body ontouchstart class="page-bg">
- <div class="page-hd">
- <h1 class="page-hd-title">
- 弹出层
- </h1>
- <p class="page-hd-desc">可以自定义的弹出层,用于登录,弹出</p>
- </div>
-
- <a href="javascript:showmark();" class="weui_btn weui_btn_primary">自定义弹出层</a>
- <div class="weui_mask"></div>
- <div class="weui-custom-pop">
- <div class="close" onclick="hidemark()"><i class="icon icon-95 f25"></i></div>
- <div class="weui-custom-hd">登录管理系统</div>
- <div class="weui-custom-bd">
- <input type="tel" class="weui_input" placeholder="手机号">
-
- </div>
- <div class="weui-custom-bd">
- <input type="password" class="weui_input" placeholder="密码">
- </div>
- <div class="weui-custom-ft">
- <a href="javascript:hidemark();">取消</a>
- <a href="javascript:;">确定</a>
- </div>
- </div>
-
- <div style="height:700px;">往下拉</div>
- <div class="top"><i class="icon icon-7"></i></div>
- <script>
- function showmark(){
- $('.weui_mask').addClass('weui_mask_visible');
- $('.weui-custom-pop').addClass('weui-dialog-visible');
- }
- function hidemark(){
- $('.weui_mask').removeClass('weui_mask_visible');
- $('.weui-custom-pop').removeClass('weui-dialog-visible');
- }
-
- $(window,document).bind('scroll',function(){
- if($(this).scrollTop() > 120){
- $('.top').fadeIn('slow');
- }else{
- $('.top').fadeOut('slow');
- }
- });
-
- $(".top i").bind("tap",function(){
- $("html,body").animate({"scrollTop":0});
- });
-
- </script>
- </body>
- </html>
|
