求一段jquery弹出页面代码(遮罩效果)？

我需要一个点击按钮后，弹出遮罩页面小的代码，那位大侠帮帮忙啊

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试</title>
    <style>
    #test{
    width:500px;
    height:350px;
    border:1px solid red;
    background:#999;
    opacity:0.6;
    display:none;
    margin-left:200px;
    margin-top:200px;
    position:absolute;
    z-index:1000;
    }
    </style>
    <script src="jquery-1.3.2.js"></script>
    <script>
    $(function(){
    $("#btn").click(function(){
    $("#test").show();
    });
    });
    </script>
    </head><body>
    <input type="button" id="btn" value="显示" />
    <div id="test"></div>
    </body>
    </html>
    大小自己可以设置，位置也可以根据margin-top或者margin-left 来修改
      

  2.   

    function outboxshow(i)
    {
     var width = document.documentElement.clientWidth;
     var newobj = document.createElement('div');
     if( window.screen.availHeight < document.body.scrollHeight ){
     height = document.body.scrollHeight;
     }else{
     height = window.screen.availHeight;
     }
     newobj.setAttribute('id','bigdiv');
     newobj.style.position= "absolute" ;
     newobj.style.width= width + "px";
     newobj.style.height= height + "px";
     newobj.style.top="0px";
     newobj.style.left="0px";
     newobj.style.background = "#000";
     newobj.style.filter = "Alpha(opacity=60);";
     newobj.style.opacity = "0.6";
     newobj.style.zIndex = "100001";
     newobj.innerHTML = '<iframe style="position:absolute;top:-5px;left:0;width:100%;height:100%;background:#000;filter:alpha(opacity=0);"></iframe>';
     document.body.appendChild(newobj);
     
     selfH = $('#out_box'+i).height() ;
     selfW = $('#out_box'+i).width() ;
     height = document.documentElement.clientHeight -selfH ;
     width = document.body.scrollWidth - selfW ; 
     $('#out_box'+i).css('top',$(window).scrollTop()+height/2);
     $('#out_box'+i).css('left',width/2);
     $('#out_box'+i).css('z-index',100002);
     $('#out_box'+i).css('display','block');
     $(window).scroll(function(){
    $('#out_box'+i).css('top',$(window).scrollTop()+height/2);   
       });
    }
      

  3.   

    百度jquery.tools.js 
    overlay
    含有jquery 的遮罩
      

  4.   

    http://topic.csdn.net/u/20100223/17/edb27cb3-24ff-461d-9cff-eb8b8816b6bf.html?26770给你个传送门 里面有源码
      

  5.   

    jquery.loadmask.js$('#target').mask('含有jquery 的遮罩');
    $('#target').unmask();