DIV遮罩效果

document.observe('dom:loaded', function(){
    $('panel_edit').observe('click', function(event){
        shadow_show(this.getAttribute('name'));
    });
    $('exit').observe('click', function(event){
        hide_all(this.getAttribute('name'));
    });
});

function shadow_show(panel_id){
    if ($('shadow')) {
        $('shadow').style.display = 'block';
        $(panel_id).style.display = 'block';
    }
    else {
        var body = document.body;
        var shadow = new Element('div', {
            id: 'shadow'
        });
        var width = body.offsetWidth + "px";
        var height = body.offsetHeight + "px";
        shadow.setStyle({
            width: eval('width'),
            height: eval('height'),
            backgroundColor: '#121212',
            top: 0,
            left: 0,
            position: 'absolute',
            zIndex: 100,
            minHeight: '768px',
            opacity: '0.4', 
        });
        
        $(panel_id).style.display = 'block';
        body.appendChild(shadow);
    }
}

function hide_all(panel_id){
    var j = jQuery.noConflict();
    $('shadow').hide();
    $(panel_id).hide();
}

自己写的遮罩层效果，可惜后来决定全部用JQUERY的插件～ 放这以后再完善..


好久没动过这个东西  回头再看 写的太麻烦 其实就是建俩层 一个遮罩 一个显示 显示的Z-INDEX高于遮罩的 上面写的把太多本该放在CSS里的东西放到JS里了。