ui/前端规范
搜索
前端作者:钟海生 最新编辑:2021-05-31(更新内容:自定义滚动、资讯、中奖名单滚动)
wap端手机登录、注册弹窗
查看Demo
引入外部css:
<link rel="stylesheet" type="text/css" href="http://download.shengli.com/ui/wap/css/base.css">
<link rel="stylesheet" type="text/css" href="http://download.shengli.com/ui/wap_tel_enter_register/css/style.css">
<link rel="stylesheet" type="text/css" href="http://download.shengli.com/ui/wap/fonts/fonts.css">
引入外部js:
<!--head之间引入,用于css加载后进行样式渲染-->
<script type="text/javascript" src="http://download.shengli.com/ui/wap/js/rem-750.js"></script>
<script type="text/javascript" src="http://download.shengli.com/ui/wap/js/jquery.min.js"></script>
<script type="text/javascript" src="http://download.shengli.com/ui/wap/js/base.js"></script>
引入html:
<div class="btn-box">
<span class="btn-enter btn-primary btn" onclick="javascript:$('.enter-dialog-box').show();">登录</span>
<span class="btn-register btn-primary btn" onclick="javascript:$('.register-dialog-box').show();">注册</span>
</div>
<!--手机登录-->
<div class="enter-dialog-box dialog-box">
<div class="inner">
<span class="close"></span>
<p class="title">玩家登录</p>
<div class="set-box">
<input type="tel" class="tel form-control" placeholder="手机号">
</div>
<div class="set-box">
<input type="password" class="pwd form-control" placeholder="密码">
</div>
<div class="set-box">
<label class="checkbox-inline" for="twoCkx">
<input type="checkbox" id="twoCkx" name="chkBox" class="ckx">
<i class="icon icon-checkbox"></i>记住我
</label>
<span class="btn-forgetPwd">忘记密码</span>
</div>
<span class="btn-dialog-enter btn-primary btn">登录</span>
<p class="dsc-text">还没有帐号?<span class="btn-dialog-register" onclick="javascript:$('.register-dialog-box').show();$(this).parents('.enter-dialog-box').hide();">马上注册</span></p>
</div>
</div>
<!--手机注册-->
<div class="register-dialog-box dialog-box">
<div class="inner">
<span class="close"></span>
<p class="title">玩家注册</p>
<div class="set-box">
<input type="tel" class="tel form-control" placeholder="手机号">
</div>
<div class="set-box">
<input type="password" class="pwd form-control" placeholder="密码">
</div>
<div class="set-box">
<input type="text" class="checkNumber form-control" placeholder="验证码"><span class="btn-sendNumber btn-border btn">获取验证码</span>
</div>
<div class="set-box">
<label class="checkbox-inline" for="twoCkx">
<input type="checkbox" id="twoCkx" name="chkBox" class="ckx">
<i class="icon icon-checkbox"></i>记住我
</label>
<span class="btn-forgetPwd">忘记密码</span>
</div>
<span class="btn-dialog-register btn-primary btn">注册</span>
<p class="dsc-text">已经有帐号?<span class="btn-dialog-enter" onclick="javascript:$('.enter-dialog-box').show();$(this).parents('.register-dialog-box').hide();">马上登录</span></p>
</div>
</div>