生成覆盖层效果 

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js "></script>
   <style>
      .close{
    position:absolute;
    top:50%;
    left:50%;
    font-weight:bold;
    font-size:30px;
    color:#fff;
    background:#000;
    opacity:0.8;
    width:85px;
    height:40px;
    text-align:center;
    display:block;
    
}
.covery{
position:absolute;
top:0;
left:0;
background:#ccc;
opacity:0.5;
width:100%;
display:block;
}
   </style>
   </head>
   <body>
       <input type="button" id="btn" value="click me" />
       <script>
       $(function(){
var h = $(document).height();
$('body').append('<div id="covery"></div>');
$('#covery').height(h).addClass('covery');
$('#covery').hide();
$('#btn').click(
    function(){
    $('#covery').show()
    $('#covery').append('<a id="close">close</a>');
        $('#close').addClass("close").click(function(){
            $('#covery').hide()
    })

    }
);
    
})
       </script>
   </body>
</html>

 

posted @ 2013-05-08 17:17  Joy Ho  阅读(167)  评论(0)    收藏  举报