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

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

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

[html] view
plaincopy

<div class="datagrid-mask"></div>

<div class="datagrid-mask-msg">

<div style="font-weight:bold; color:red;">对不起，您使用的浏览器版本太低（Internet Explorer <span id="browser_version"></span>），访问系统会存在速度和兼容性的问题！</div>

<div style="font-weight:bold; color:green;">我们推荐您使用最新版的 Chrome、Firefox、或 IE9 及以上版本的浏览器。</div>

<div><a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html" target="_blank">下载 Chrome 浏览器</a></div>

<div><a href="http://firefox.com.cn/" target="_blank">下载 Firefox 火狐浏览器</a> </div>

<div><a href="http://windows.microsoft.com/zh-CN/internet-explorer/products/ie/home/" target="_blank">下载 Internet Explorer 9 浏览器</a> </div>

</div>

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

[javascript] view
plaincopy

<script type="text/javascript">

$(function(){

if(self != top){

top.location = self.location;

}

var lameIE = $.browser.msie && $.browser.version < 9;

if (lameIE) {

$('#browser_version').html($.browser.version);

var $mask = $('.datagrid-mask');

var $mask_msg = $('.datagrid-mask-msg');

$mask.css({

display: 'block',

width: $(window).width(),

height: $(window).height()

}).appendTo(document.body);

$mask_msg.css({

display: 'block', //显示出来

'z-index': 9999, //最顶层，用户才能点到链接

width: 560,

height: 90,

padding: '10px 10px 10px 60px', //覆盖原来的样式

background: '#ffc url("${ctx}/jquery-easyui/themes/default/images/messager_warning.gif") no-repeat scroll 10px 10px', //覆盖原来的样式

left: ($(window).width() - $mask_msg.outerWidth())/2,

top: ($(window).height() - $mask_msg.outerHeight())/2

});

$(window).resize(function() {

$mask.css({

width: $(window).width(),

height: $(window).height()

});

$mask_msg.css({

left: ($(window).width() - $mask_msg.outerWidth())/2,

top: ($(window).height() - $mask_msg.outerHeight())/2

});

}).resize();

}

});

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