如何实现ecshop纯js实现会员注册与登录弹窗

更新时间:2016-08-19 点击量:1808

如何实现ecshop纯js实现会员注册与登录弹窗



优易软件为大家分享如何去实现ecshop纯js实现会员注册与登录弹窗,


1.打开你的模版下library/member_info.lbi 文件,在里面添加如下的代码。

<script type=”text/javascript”>
function login_module(){//点击登录时,调用的函数
var mengban=document.getElementById(“mengban”);
mengban.className=”mengban”;
var divs=document.getElementById(“login_module”);
divs.style.display=”block”;
}
function close_login(){//关闭弹窗时,调用的函数
var mengban=document.getElementById(“mengban”);
mengban.className=” “;
document.getElementById(“login_module”).style.display = “none”;
document.getElementById(“register_module”).style.display = “none”;
}
function register_module(){//注册时,调用的函数
var mengban=document.getElementById(“mengban”);
mengban.className=”mengban”;
var divs=document.getElementById(“register_module”);
divs.style.display=”block”;
}
</script>

大家看注释都明白,上面的函数分别定义了,点击登录,注册等链接时,所调用的函数。

2.打开你的模版下library/page_header.lbi 文件,在里面添一个div层,如下:

<div class=”" id=”mengban”> </div>

3.打开你的模版下style.css,在最后面添加这样一行:

.mengban {position:absolute; top:0; background-color: rgba(227,227,227,.9); background: #E3E3E3; *background-color: #E3E3E3; filter: alpha(opacity=70);  opacity:0.7; left:0; width:100%; height:9000px; z-index:10000;}

该行定义了div 层mengban的样式,即弹窗弹出后的背景色样式。

4.接下来定义一个div,用来展示弹出窗的内容,例如:用户登录信息。将该div放在page_footer.lbi的最下面。该div内容如下:(这里只贴出ecshop用户登录信息,注册的与之类似)。

<div id=”login_module” style=”display:none;height:300px;width:430px;margin:0 auto;border:7px solid #808080;position:absolute;
left:30%;top:130px;z-index:100001;background-color:#ffffff”>
<div style=”text-align:right;margin:4px”><a href=”javascript:void(0);”  onclick=”close_login()”><img src=”images/closelabel.gif”/></a></div>
<div style=”margin-top:20px;margin-left:80px;height:30px; background:url(images/ur_bg.gif) no-repeat 0px 0px;”></div>
<form name=”formLogin” action=”user.php” method=”post” **ubmit=”return userLogin()”>
<table width=”100%” border=”0″ align=”center”>
<tr>
<td width=”30%” align=”right”>email:</td>
<td width=”70%”><input name=”username” type=”text” size=”30″ id=”username” /></td>
</tr>
<tr>
<td align=”right”>assword:</td>
<td><input name=”password” type=”password” size=”30″ id=”password” /></td>
</tr>
<!– {if $enabled_captcha} 判断是否启用验证码 –>
<tr>
<th align=”right”>{$lang.comment_captcha}:</th>
<td>
<input type=”text” size=”8″ name=”captcha” />
<img src=”captcha.php?is_login=1&{$rand}” onClick=”this.src=’captcha.php?is_login=1&’+Math.random()” alt=”captcha” style=”cursor:pointer;” />
</td>
</tr>
<!– {/if} –>
<tr>
<td colspan=”2″ align=”center”>
<input type=”submit” name=”login” value=”Enter” />
<input type=”button” name=”register” value=”Submit” onclick=”window.location.href=’user.php?act=register’”/>
<input type=”hidden” name=”act” value=”act_login” />
<input type=”hidden” name=”back_act” value=”{$back_act}” />            </td>
</tr>
<tr>
<td colspan=”2″ align=”center”>
<a href=”user.php?act=get_password”>{$lang.get_password_by_mail}</a></td>
</tr>
</table>
</form>
<center> <a href=”javascript:void(0);”  onclick=”fbLogin()”><img src=””/></a></center>
</div>

总结下,上面代码整个流程如下:用户点击ecshop登录,接着调用login_module()函数,该函数立即弹窗一个弹窗,弹窗div的ID即为login_module,而弹窗的背景色即为我们所定义的mengban div  层。当点击弹窗关闭之后,立即调用close_login()函数,该函数作用:把登录弹窗隐藏掉,背景色恢复。


支付宝扫码打赏 微信打赏

如果文章对您有帮助,就打赏一个吧

在线客服

客户服务

热线电话:

0755-36656507 15889489919 服务时间:

周一到周六:9:00-18:00

在线QQ客服

在线微信客服

关于我们 常见问题

支付方式 加盟合作

提交需求
优惠红包 购物车0 反馈留言 返回顶部