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

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

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

<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的源文件中找到。下面的代码有覆盖原来的样式的。

<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里截取的)


  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值