ecshop弹出登录框的效果

客官°小女子只卖身不卖艺 2021-09-25 20:28 442阅读 0赞

**1.**打开你的模版下library/member\_info.lbi 文件，在里面添加如下的代码。

function close\_login()\{ //关闭弹窗时，调用的函数  
var mengban=document.getElementByIdx\_x(“mengban”);  
mengban.className=” “;  
document.getElementByIdx\_x(“login\_module”).style.display = “none”;  
document.getElementByIdx\_x(“register\_module”).style.display = “none”;

function register\_module()\{ //注册时，调用的函数  
var mengban=document.getElementByIdx\_x(“mengban”);  
mengban.className=”mengban”;  
var divs=document.getElementByIdx\_x(“register\_module”);  
divs.style.display=”block”;

\}  
</script>

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

即：

<a href="\#" οnclick="[login\_module()">登录][login_module]</a>

<a href="\#" οnclick="[register\_module ()">注册][login_module]</a>

以登录为例。

**2**.打开你的模版下library/page\_header.lbi 文件，在里面添一个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用户登录信息，注册的与之类似）。

新建一个member\_login.lbi文件，把用户登录的信息，复制到文件里面。

\{include file='library/member\_login.lbi'\}

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

如在其他的地方用到登陆框的弹出，可以这样做。

![70][]

[login_module]: http://blog.sina.com.cn/s/blog_8dc13ec50101m3fy.html#
[70]: /images/20210923/063f5b747df34f3684eeb3fa633ea2fb.png