这里需要用到一个插件layer.js，下载地址http://xu.sentsin.com/jquery/layer/

当然也是需要引入jquery.js的,jquery的版本要求在1.8.2以上

 
  
  1. <script type="text/javascript" src="jquery-1.8.2.js"></script> 
  2. <script type="text/javascript" src="layer/layer.js"></script> 
  3. <script type="text/javascript" > 
  4. $(document).ready(function (){ 
  5.     $("#demo1").click(function (){ 
  6.         $.layer({ 
  7.             area : ['auto','auto'], 
  8.             dialog : {msg:'web攻城师kenan',type : 8}    
  9.         }); 
  10.     }); 
  11.      
  12.     $("#demo2").click(function (){ 
  13.         $.layer({ 
  14.             shade : ['',false], 
  15.             area : ['auto','auto'], 
  16.             title : ['',false], 
  17.             dialog : {msg:'web攻城师kenan'}     
  18.         }); 
  19.     }); 
  20.      
  21.     $("#demo3").click(function (){   
  22.         $.layer({ 
  23.             time:2, 
  24.             closeBtn : [0 , false], 
  25.             shade : ['',false], 
  26.             area : ['auto','auto'], 
  27.             title : ['',false], 
  28.             dialog : {msg:'web攻城师kenan'}     
  29.         }); 
  30.     }); 
  31.      
  32.     $("#demo4").click(function (){ 
  33.         $.layer({ 
  34.             shade : [0.5,'',false], 
  35.             area : ['auto','auto'], 
  36.             dialog : { 
  37.                 msg:'您是如何看待web开发？', 
  38.                 btns : 2,  
  39.                 type : 4, 
  40.                 btn : ['重要','奇葩'], 
  41.                 yes : function(){ 
  42.                     layer.msg('您选择了重要。',2,1); 
  43.                 }, 
  44.                 no : function(){ 
  45.                     layer.msg('奇葩!!!',2,4); 
  46.                 } 
  47.             } 
  48.         }); 
  49.     }); 
  50.      
  51.     $("#demo5").click(function (){ 
  52.         $.layer({ 
  53.             shade : ['',false], 
  54.             type : 1, 
  55.             area : ['315px','auto'], 
  56.             offset : ['auto','auto'], 
  57.             border : [10 , 0.5 , '#628C1C', true], 
  58.             page : {dom : '.layer_notice'}, 
  59.             close : function(index){ 
  60.                 LAYER.close(index); 
  61.                 $('.layer_notice').hide();   
  62.             } 
  63.         }); 
  64.     }); 
  65.      
  66.     $("#demo6").click(function (){ 
  67.         $.layer({ 
  68.             type : 1, 
  69.             title : ['',false], 
  70.             fix : false, 
  71.             offset:['50px' , ''], 
  72.             area : ['515px','615px'], 
  73.             page : {dom : '#tong'} 
  74.         }); 
  75.         $('#tong').live('click',function(){ 
  76.             var index = LAYER.getIndex(this);  
  77.             LAYER.close(index); 
  78.         }); 
  79.     }); 
  80.      
  81.     $("#demo7").click(function (){ 
  82.         $.layer({ 
  83.             type : 2, 
  84.             closeBtn : [0,true], 
  85.             iframe : { 
  86.                 src : 'http://www.baidu.com' 
  87.             }, 
  88.             title : ['' , false], 
  89.             area : ['500px','300px'], 
  90.             success : function(){ //层加载成功后进行的回调 
  91.                 LAYER.shift('right-bottom',2000); //浏览器右下角弹出 
  92.             } 
  93.         }); 
  94.     }); 
  95.      
  96.     $("#demo8").click(function (){ 
  97.             layer.tips('我爱你，你爱我吗？' , this , 3); 
  98.          
  99.     }); 
  100.      
  101. }); 
  102. </script> 
  103. <style type="text/css"> 
  104.  html, body { 
  105.     padding:100px; 
  106.     font-family: '微软雅黑'; 
  107.     font-size: 14px; 
  108. } 
  109.   .link{ 
  110.     margin-right:50px; 
  111.     color: #363636; 
  112.     text-decoration: none; 
  113.     background: none repeat scroll 0 0 #F2F2F2; 
  114.     border: 1px solid #AAAAAA; 
  115.     display: block; 
  116.     float: left; 
  117.     height: 30px; 
  118.     line-height: 30px; 
  119.     margin-right: 10px; 
  120.     margin-bottom:50px; 
  121.     padding: 0 20px; 
  122.     text-align: center; 
  123. } 
  124. .link:hover{ 
  125.     color:red; 
  126.     cursor:pointer; 
  127. } 
  128. </style> 
  129. <a id="demo1" class="link">信息框一 </a> 
  130. <a id="demo2" class="link">信息框二 </a> 
  131. <a id="demo3" class="link">自动消失的信息框 </a> 
  132. <a id="demo4" class="link">询问框 </a> 
  133. <a id="demo5" class="link">页面层一 </a> 
  134. <a id="demo6" class="link">页面层二 </a> 
  135. <a id="demo7" class="link">iframe层 </a><br/><br/><br/> 
  136. <div> 
  137. <a id="demo8" class="link" style="float:left;">itips层 </a> 
  138. </div> 
  139. <div class="layer_notice" style="height:200px;background-color:green;display:none;">大家好哦，独领风骚付款</div> 
  140. <div id="tong" style="display:none;"><img src="p_w_picpaths/tong.jpg" width="300" height="200"/></div>