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

如何实现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()函数，该函数作用：把登录弹窗隐藏掉，背景色恢复。