原生js向css弹出层传动态值

<html>
<head>
<title>js向弹出层传值</title>
<style>
body{margin:0;padding:0;font-size:12px;}
.zhezhao{width:100%;height:100%;background:#000;display:none;position:absolute;left:0;top:0;}
.overform{width:300px;height:200px;background:#fff;display:none;left:40%;top:35%;position:absolute;}
table{border:1px solid #ccc;}
td{border:1px solid #ccc;}
</style>
<script>
var ctime;
function $(id)
{
    return document.getElementById(id);
}
//判断浏览器
function checkIE()
{
     var sUserAgent =  navigator.userAgent;
     var ie = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE");
     if(ie){
         return true;
     }
     return false;
}
//渐变
function shade()
{
    var tmp = parseFloat($('zhezhao').style.opacity);
    if(tmp < 0.4)
    {
        $('zhezhao').style.opacity = tmp + 0.05;
    }
    else
    {
        clearInterval(ctime);
        $('overform').style.display = 'block';
    }
}
//弹出层
function msgBox(obj)
{
    $('zhezhao').style.opacity = 0;
    $('zhezhao').style.display = 'block';
    ctime = setInterval("shade()",50);
    //判断浏览器取值
    var index1,index2,index3;
    checkIE() ? index1 = 0 : index1 =1;
    checkIE() ? index2 = 1 : index2 =3;
    checkIE() ? index3 = 2 : index3 =5;
    //赋值
    $('name').value = obj.parentNode.parentNode.childNodes[index1].innerHTML;
    $('sex').value = obj.parentNode.parentNode.childNodes[index2].innerHTML;
    $('age').value = obj.parentNode.parentNode.childNodes[index3].innerHTML;       
}
//关闭弹出层
function closeBox()
{
    $('zhezhao').style.display = 'none';
    $('overform').style.display = 'none';
}
</script>
</head>
<body>
    <div class="zhezhao" id="zhezhao"></div>
    <div class="overform" id="overform">
        <table>
            <tr>
                <td>value</td>
                <td><input type="text" disabled="disabled" id="name"/></td>
                <td><input type="text" disabled="disabled" id="sex"/></td>
                <td><input type="text" disabled="disabled" id="age"/></td>
                <td><input type="button" onclick="closeBox()" value="close"/></td>
            </tr>
        </table>
    </div>   
    <div class="datalist">
        <table>
            <tr>
                <td>hello11</td>
                <td>hello12</td>
                <td>hello13</td>
                <td><input type="button" onclick="msgBox(this)" value="弹出"/></td>
            </tr>
            <tr>
                <td>hello21</td>
                <td>hello22</td>
                <td>hello23</td>
                <td><input type="button" onclick="msgBox(this)" value="弹出"/></td>
            </tr>
            <tr>
                <td>hello31</td>
                <td>hello32</td>
                <td>hello33</td>
                <td><input type="button" onclick="msgBox(this)" value="弹出"/></td>
            </tr>           
        </table>   
    </div>
</body>
</html>

posted @ 2011-10-14 00:42  layho  阅读(638)  评论(0)    收藏  举报