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

 

 

参考网站:

ecshop纯js实现会员注册与登录弹窗 http://www.topchajian.com/?p=420