shangshang
/
hhqtest


			
				
					
						
						
							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>