用jQuery EasyUI自带的遮罩来显示浏览器版本不够时的提示信息。

内部系统，约束一下浏览器，防止老弱的IE6来搅局，影响满意度，如果检测到浏览器版本不符合，给出链接让用户自己下载。

本示例使用了，jquery, jquery easyui库及其资源文件，利用了easyui里自带的遮罩效果，不用再造轮子了！

[html]  view plain copy

1. <div class="datagrid-mask"></div>  
2. <div class="datagrid-mask-msg">  
3.   <div style="font-weight:bold; color:red;">对不起，您使用的浏览器版本太低（Internet Explorer <span id="browser_version"></span>），访问系统会存在速度和兼容性的问题！</div>  
4.   <div style="font-weight:bold; color:green;">我们推荐您使用最新版的 Chrome、Firefox、或 IE9 及以上版本的浏览器。</div>  
5.   <div><a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html" target="_blank">下载 Chrome 浏览器</a></div>  
6.   <div><a href="http://firefox.com.cn/" target="_blank">下载 Firefox 火狐浏览器</a> </div>  
7.   <div><a href="http://windows.microsoft.com/zh-CN/internet-explorer/products/ie/home/" target="_blank">下载 Internet Explorer 9 浏览器</a> </div>  
8. </div>  

页面上，给出两个div，注意，他们在easyui的style都是display:none的，所以此处不用担心会显示出来。 这两个class可以到easyui的源文件中找到。下面的代码有覆盖原来的样式的。

[javascript]  view plain copy

1. <script type="text/javascript">  
2. $(function(){  
3.     if(self != top){  
4.         top.location = self.location;  
5.     }  
6.       
7.     var lameIE = $.browser.msie && $.browser.version < 9;  
8.     if (lameIE) {  
9.         $('#browser_version').html($.browser.version);  
10.           
11.         var $mask = $('.datagrid-mask');  
12.         var $mask_msg = $('.datagrid-mask-msg');  
13.           
14.         $mask.css({  
15.             display: 'block',  
16.             width: $(window).width(),  
17.             height: $(window).height()  
18.         }).appendTo(document.body);  
19.           
20.         $mask_msg.css({  
21.             display: 'block', //显示出来  
22.             'z-index': 9999, //最顶层，用户才能点到链接  
23.             width: 560,  
24.             height: 90,  
25.             padding: '10px 10px 10px 60px', //覆盖原来的样式  
26.             background: '#ffc url("${ctx}/jquery-easyui/themes/default/images/messager_warning.gif") no-repeat scroll 10px 10px', //覆盖原来的样式  
27.             left: ($(window).width()  - $mask_msg.outerWidth())/2,  
28.             top:  ($(window).height() - $mask_msg.outerHeight())/2  
29.         });  
30.   
31.         $(window).resize(function() {  
32.             $mask.css({  
33.                 width:  $(window).width(),   
34.                 height: $(window).height()  
35.             });  
36.             $mask_msg.css({  
37.                 left: ($(window).width()  - $mask_msg.outerWidth())/2,  
38.                 top:  ($(window).height() - $mask_msg.outerHeight())/2  
39.             });  
40.         }).resize();  
41.     }   
42. });  

效果图：（直接将lameIE设置为true的，我的IE版本是9，这张图是在chrome里截取的）