夏日博客

A-A+

jquery弹出对话框背景遮罩例子

2016年01月12日 前端设计 暂无评论 阅读 5 views 次

遮罩效果在许多的一些图片预览或注册弹出对话框中都会碰到过了,下面我们一起来看这个jquery弹出对话框背景遮罩例子,希望例子能够对各位带来帮助,首先定义一个背景黑色，透明度低的div,当点击的时候弹出需要显示的对话框,并显示遮罩层,关闭对话框,遮罩层隐藏,要注意的是对话框的z-index的值要比遮罩层大.

  1. .mask{  
  2.     position: absolute;  
  3.    
  4.     background-color: #000;  
  5.    
  6.     opacity: 0.5;  
  7.    
  8.     z-index: 99;  
  9.    
  10.     top: 0px;  
  11.    
  12.     width: 100%;  
  13.    
  14.     height: 100%;  
  15.    
  16.     display: none;  
  17.    
  18. }  
  19.    
  20. <div class="complain-theme-content">  
  21.    
  22.                 <ul>  
  23.    
  24.                     <li>技术水平</li>  
  25.    
  26.                     <li>服务态度</li>  
  27.    
  28.                     <li>服务质量</li>  
  29.    
  30.                     <li>服务速度</li>  
  31.    
  32.                 </ul>  
  33.    
  34.             </div>  
  35.    
  36. <div class="mask"></div>  
  37. $(function(){  
  38.    
  39.         $('.complain-theme').click(function(){  
  40.    
  41.             $('.complain-theme-content').fadeIn();  
  42.    
  43.             $('.mask').show();  
  44.    
  45.         });  
  46.    
  47.         $('.complain-theme-content li').click(function(){  
  48.    
  49.             var txt=$(this).text();  
  50.    
  51.             $(".complain-txt").text(txt);  
  52.    
  53.             $('.complain-theme-content').fadeOut();  
  54.    
  55.             $('.mask').hide();  
  56.    
  57.         });  
标签：

给我留言