转到论坛里面来：
帝国CMS弹出登录窗口实现方法
看到好多网站都用弹出登陆窗口让用户登陆注册，其实就是用JS调用一个DIV层实现的
今天我用帝国CMS具体讲一下怎么实现这个效果：
一.打开帝国CMS后台-公共模板-JS讲用登陆模板
把附件里的调用登陆模板代码复制进去-修改
二.在你的首页加入CSS样式和JS代码
1.CSS：
<style>
#lggoodBox{
margin:0 auto;
padding:0px;
text-align:left;
width:370px;
height:220px;
background:#FFF;
font-size:9pt;
border:1px solid #6E6E6E;
overflow:hidden;
filter:alpha(opacity=90);
opacity:1;
font:14px/1.75 Arial,sans-serif,宋体;
}
#lggoodBox .title{
text-align:left;
padding-left:10px;
font-size:11pt;
height:37px;
line-height:37px;
cursor:move;
background:#CB3232;
}
#lggoodBox .t1{
float:left;
font-weight:bold;
color:#FFF;
text-decoration:none;
}
#lggoodBox .t2{
float:right;
text-align:center;
line-height:17px;
height:17px;
width:17px;
margin-top:10px;
margin-right:5px;
overflow:hidden;
border:1px solid #fff;
background:#FFF;
cursor:pointer;
color:gray;
}
#lggoodBox .lggood{
background:white;
min-height:30px;
_height:30px;
overflow:auto;
_overflow:inherit word-wrap:break-word;
word-break:break-all;
padding:15px;
}
#bgDiv{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
right:0px;
background-color:#777;
opacity:0.7;
}
#loginBox{
margin:0 auto;
list-style:none;
}
#loginBox li{
padding-top:1em;
}
.mcInputBox{
border-color:#949494 #CACACA #CACACA #949494;
}
.mcInputBox,.mcInputBox span,.mcInputBox input{
display:inline-block;
border-width:1px;
border-style:solid;
vertical-align:middle;
}
li{
text-align:-webkit-match-parent;
}
.mcInputBox,.mcInputBox span,.mcInputBox input{
display:inline-block;
border-width:1px;
border-style:solid;
vertical-align:middle;
}
.mcInputBox span{
border-color:#E6E6E6;
border-width:1px 0 0 1px;
}
.mcInputBox input{
border-color:#EFEFEF;
border-width:1px 0 0 1px;
margin:0;
padding:6px 5px;
outline:0;
line-height:1;
float:left;
}
.loginInput{
width:200px;
}
.button{
font-size:14px;
color:#3080C8;
font-weight:bold;
background:url(btn.gif) no-repeat;
width:106px;
height:28px;
float:left;
overflow:hidden;
line-height:28px;
text-align:center;
display:inline;
cursor:pointer;
border:none;
margin:20px 0 0 80px;
}
.tiptxt{
font-size:12px;
margin-left:20px;
line-height:65px;
}
</style>
2.JAVASCRIPT：
<script type="text/javascript">
var IsMousedown,LEFT,TOP,lggood;
document.getElementById("Mdown").onmousedown=function(e){
lggood = document.getElementById("lggoodBox");
IsMousedown = true;
e = e||event;
LEFT = e.clientX - parseInt(lggood.style.left);
TOP = e.clientY - parseInt(lggood.style.top);
document.onmousemove = function(e){
e = e||event;
if (IsMousedown){
lggood.style.left = e.clientX - LEFT + "px";
lggood.style.top = e.clientY - TOP + "px";
}
}document.onmouseup=function(){
IsMousedown=false;
}
}</SCRIPT>
三.首页调用JS登陆模板
把下面代码放在你首页模板里
<div id="bgDiv" style="display:none;"></div>
<span><script src="/e/member/login/loginjs.php"></script></span>
具体首页js调用显示的位置自己写CSS代码
四.效果图
调用登陆模板下载：
免费下载
上传以下附件：
[下载 *.rar](文件大小：4.27 KB,下载次数：395)
|
顶部 
加入收藏夹
2012-11-22 23:09:48 
已设置保密
回复
引用
报告
编辑
删除
好东西