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>