菜鸟请教 “在注册页面上点击注册链接，出现一个带有注册表单的层”

Question

菜鸟请教 “在注册页面上点击注册链接，出现一个带有注册表单的层”

Answer 1

可以参考一下easyPopupeasyPopup(olayer,sclass,closecls,scolor,tcolor,dragdrop,width,height,zindex)
    Popup类构造函数
    参数：弹出层对象（如不指定，将自动创建一个DIV），指定样式名（默认为easypopup），指定关闭标识样式名（默认为closebtn），标题背景及边框颜色（默认为#808080），标题文字颜色（默认为#ffffff），是否允许拖动，宽，高，Z坐标（zindex）

Answer 2

能不能给段具体的代码啊，我的JavaScript很菜，有点看不明白！

Answer 3

<SCRIPT language="javascript"> 
function show(){ 
document.getElementById("aa").style.display=""; 
} 
function hid(){ 
document.getElementById("aa").style.display="none"; 
} 
</script> 
<img src="D:\Backup\a.jpg" width="100" height="100" onMouseOver="show()" onmouseout="hid()"> <div id="aa" style="display:none" onMouseOver="show()" onmouseout="hid()"> <a href="http://bbs.csdn.net">bbs.csdn.net </a> </div>这样可以弹出层，但是不是我想要的效果！
我想要的效果是页面上有一个超链接， <a href="http://bbs.csdn.net">注册</a>，点击超链接后弹出一个带有注册表单的层，
并且层下面的内容无效！

Answer 4

谢谢各位的帮助！我找到了自己想要的答案：<script type="text/javascript">
var docEle = function() 
{
    return document.getElementById(arguments[0]) || false;
}function validate()
{
if(document.form1.username.value=="")
{
alert("用户名不能为空！");
document.form1.username.focus();
return false;
}
if(document.form1.pwd.value=="")
{
alert("密码不能为空！");
document.form1.pwd.focus();
return false;
}
if(document.form1.pwd1.value=="")
{
alert("确认密码不能为空！");
document.form1.pwd1.focus();
return false;
}
if(document.form1.code.value=="")
{
alert("验证码不能为空！");
document.form1.code.focus();
return false;
}
}function openNewDiv(_id) 
{
    var m = "mask";
    if (docEle(_id)) document.body.removeChild(docEle(_id));
    if (docEle(m)) document.body.removeChild(docEle(m));
    
    //mask遮罩层    var newMask = document.createElement("div");
    newMask.id = m;
    newMask.style.position = "absolute";
    newMask.style.zIndex = "1";
    _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
    _scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
    newMask.style.width = _scrollWidth + "px";
    newMask.style.height = _scrollHeight + "px";
    newMask.style.top = "0px";
    newMask.style.left = "0px";
    newMask.style.background = "#33393C";
    newMask.style.filter = "alpha(opacity=40)";
    newMask.style.opacity = "0.40";
    document.body.appendChild(newMask);
    
    //新弹出层    var newDiv = document.createElement("div");
    newDiv.id = _id;
    newDiv.style.position = "absolute";
    newDiv.style.zIndex = "9999";
    newDivWidth = 400;
    newDivHeight = 200;
    newDiv.style.width = newDivWidth + "px";
    newDiv.style.height = newDivHeight + "px";
    newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
    newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
    newDiv.style.background = "#EFEFEF";
    newDiv.style.border = "1px solid #860001";
    newDiv.style.padding = "5px";
newDiv.innerHTML = "<a href='test.html'>弹出层内容</a><form id='form1' name='form1' method='post' action=''>用 户 名：<input type='text' name='username' /><br/>密    &nbsp;&nbsp;&nbsp;码：<input type='text' name='pwd' /><br/>确认密码：<input type='text' name='pwd1' /><br/>验 证 码：<input type='text' name='code' /><br/><input type='submit' name='Submit' value='提交' onclick='return validate();'/><input type='reset' name='Submit2' value='取消' /></form>";
    document.body.appendChild(newDiv);
    
    //弹出层滚动居中    function newDivCenter()
    {
        newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
        newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
    }
    if(document.all)
    {
        window.attachEvent("onscroll",newDivCenter);
    }
    else
    {
        window.addEventListener('scroll',newDivCenter,false);
    }
    
    //关闭新图层和mask遮罩层    var newA = document.createElement("a");
    newA.href = "#";
    newA.innerHTML = "关闭";

    newA.onclick = function() 
    {
        if(document.all)
        {
            window.detachEvent("onscroll",newDivCenter);
        }
        else
        {
            window.removeEventListener('scroll',newDivCenter,false);
        }
        document.body.removeChild(docEle(_id));
        document.body.removeChild(docEle(m));
        return false;
    }
    newDiv.appendChild(newA);
}
</script>
<body>
<a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">注册</a>
</body>