仿的是花瓣登录效果,他默认HTML是这样的
<a onclick="app.showSheet('login', {modal: true});return false;" href="#" class="login btn wbtn"><span class="text"> 登录</span></a>
点击登录,会在#page里面加上登录框,
<div class="sheet-overlay" style="opacity: 1;"></div>
<div id="sheet" class="destroy" style="display: block; top: 72px;">
<div id="sheet_login" class="sheet">
<div class="head">
<h2>登录花瓣</h2>
</div>
<div class="body">
<div class="login-connect">
<h5>使用合作网站帐号登录</h5>
<div class="connections clearfix"><a href="/oauth/weibo/instant_login/" onClick="return false;" class="weibo login-button">新浪微博</a><a href="/oauth/douban/instant_login/" onClick="return false;" class="douban login-button">豆瓣</a><a href="/oauth/renren/instant_login/" onClick="return false;" class="renren login-button">人人网</a><a href="/oauth/qzone/instant_login/" onClick="return false;" class="qzone login-button">QQ</a></div>
<p class="less">未注册过花瓣也可以直接登录哦</p>
</div>
<div class="login-form">
<h5>使用注册邮箱登录</h5>
<form id="auth_form" action="https://huaban.com/auth/" method="post" class="Form FancyForm AuthForm">
<ul>
<li>
<div class="input email">
<input id="login_email" name="email" type="text" value="">
<label>花瓣注册邮箱</label>
<span class="fff"></span></div>
</li>
<li>
<div class="input password">
<input id="login_password" name="password" type="password">
<label>密码</label>
<span class="fff"></span></div>
</li>
</ul>
<div class="non_inputs"><a id="login_btn" href="#" onClick="return false;" class="btn btn18 rbtn"><strong> 登录</strong><span></span></a><a id="reset_password" href="#" onClick="return false;" class="less fr">忘记了密码?</a><a id="back_to_login" href="#" style="display: none;" onClick="return false;" class="less fr">哦,又想起来了!</a></div>
</form>
<div id="reset_msg" style="display: none;" class="success"></div>
</div>
<div class="clear"></div>
</div>
<a href="#" title="关闭" onClick="app.hideSheet();return false;" class="close"></a></div>
</div>
点击关闭后,会删除这个登录框。而且出来的时候是向下拉,关闭的时候是向上收,我把上面代码放在/include/pop-login.php里面
onclick="app.showSheet('login', {modal: true});return false;"
他这样的方式怎么写
$('.login').on('click',function(){
$.ajax({
async: false,
url: "/include/pop-login.php",
cache: false,
success: function(html){
$("#page").append(html);
}
});
});
$('#sheet_login .close').live('click',function(){
$('.sheet-overlay').remove();
$('#sheet').remove();
});
在页面上写了一个隐藏变量,每次ajax触发之前,都清零,ajax执行成功之后,延迟100ms,才给他赋值,然后每次按键的时候,都预先判断这个隐藏变量是否有值。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。