ecshop弹出登录框的效果

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

<script type=”text/javascript”>
function login_module(){//点击登录时，调用的函数
var mengban=document.getElementByIdx_x(“mengban”);
mengban.className=”mengban”;
var divs=document.getElementByIdx_x(“login_module”);
divs.style.display=”block”;
}

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()">登录</a>

<a href="#" οnclick="register_module ()">注册</a>

 

以登录为例。

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用户登录信息，注册的与之类似）。

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

 

<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”>

{include file='library/member_login.lbi'}

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

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