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のプラグインを使うことにしました~これを置いてから改善します..
久しぶりにこれを动かして振り返るのが面倒くさいのは実は2阶建てで1つのマスクを建てて1つの表示のZ-INDEXがマスクの上に书いてあるCSSの中に置くべきものが多すぎてJSの中に入れました.