修改iealert.js支持jQuery1.9+
iealert.js使用了jQuery的live方法及$.browser属性,而jQuery1.9+已经不支持这2个方法及属性,所以要兼容高版本jQuery,需要对iealert.js代码进行修改。
注意:jQuery2+不再支持IE8-浏览器,不要导入2+以上的jQuery,jQuery会直接报错,不是iealert.js的问题。
修改iealert.js支持jQuery1.9+源代码及样式如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IEalert修改版:IE浏览器版本过低提示的Jquery插件</title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script> <script> /*iealert.js修改版源代码 * IE Alert! jQuery plugin * version 1 * author: David Nemes http://nmsdvid.com * http://nmsdvid.com/iealert/ */ (function ($) { //jQuery1.9+已经不在支持live方法,事件改为初始化成功后在调用bind方法绑定click事件,这样无论导入什么版本的jQuery都可以兼容 /*$("#goon").live("click", function () { $("#ie-alert-overlay").hide(); $("#ie-alert-panel").hide(); });;*/ var isIE = window.ActiveXObject || 'ActiveXObject' in window;//判断是否IE浏览器 if (isIE) { //jQuery1.9+已经不在支持$.browser属性,可以使用IE特有条件注释来判断IE浏览器 //使用IE条件注释判断是否IE8-浏览器 document.write('<!--[if lt ie 9]><script>window.isIE8=true;window.showIEAlert=true<\/script><![endif]-->');//IE8及以下 document.write('<!--[if lt ie 8]><script>window.isIE7=true<\/script><![endif]-->');//IE7及以下 document.write('<!--[if lt ie 7]><script>window.isIE6=true<\/script><![endif]-->');//IE6及以下 } function initialize($obj, support, title, text) { var panel = "<span>" + title + "</span>" + "<p> " + text + "</p>" + "<div class='browser'>" + "<ul>" + "<li><a class='chrome' href='https://www.google.com/chrome/' target='_blank'></a></li>" + "<li><a class='firefox' href='http://www.mozilla.org/en-US/firefox/new/' target='_blank'></a></li>" + "<li><a class='ie9' href='http://windows.microsoft.com/en-US/internet-explorer/downloads/ie/' target='_blank'></a></li>" + "<li><a class='safari' href='http://www.apple.com/safari/download/' target='_blank'></a></li>" + "<li><a class='opera' href='http://www.opera.com/download/' target='_blank'></a></li>" + "<ul>" + "</div>"; var overlay = $("<div id='ie-alert-overlay'></div>"); var iepanel = $("<div id='ie-alert-panel'>" + panel + "</div>"); var docHeight = $(document).height(); overlay.css("height", docHeight + "px"); if (support === "ie8") {// shows the alert msg in IE8, IE7, IE6 //if ($.browser.msie && parseInt($.browser.version, 10) < 9) {//已经加了IE8及以下判断才会进入此函数,可以去掉这个判断 $obj.prepend(iepanel); $obj.prepend(overlay); //} //if ($.browser.msie && parseInt($.browser.version, 10) === 6) { if (window.isIE6) {//IE6判断,添加特殊样式进行就行修正 $("#ie-alert-panel").css("background-position", "-626px -116px"); $obj.css("margin", "0"); } } else if (support === "ie7") { // shows the alert msg in IE7, IE6 //if ($.browser.msie && parseInt($.browser.version, 10) < 8) { if (window.isIE7) { $obj.prepend(iepanel); $obj.prepend(overlay); } //if ($.browser.msie && parseInt($.browser.version, 10) === 6) { if (window.isIE6) {//IE6判断,添加特殊样式进行就行修正 $("#ie-alert-panel").css("background-position", "-626px -116px"); $obj.css("margin", "0"); } } else if (support === "ie6" && window.isIE6) { // shows the alert msg only in IE6 //if ($.browser.msie && parseInt($.browser.version, 10) < 7) {//这个判断和if合并 $obj.prepend(iepanel); $obj.prepend(overlay); $("#ie-alert-panel").css("background-position", "-626px -116px"); $obj.css("margin", "0"); // } } }; //end initialize function $.fn.iealert = function (options) { var defaults = { support: "ie7", //IE版本支持,可以为ie8(ie8-都会显示提示),ie7(ie7-都会显示提示),ie6(ie6-都会显示提示) title: "\u4F60\u77E5\u9053\u4F60\u7684Internet Explorer\u662F\u8FC7\u65F6\u4E86\u5417?", // title text text: "\u4E3A\u4E86\u5F97\u5230\u6211\u4EEC\u7F51\u7AD9\u6700\u597D\u7684\u4F53\u9A8C\u6548\u679C,\u6211\u4EEC\u5EFA\u8BAE\u60A8\u5347\u7EA7\u5230\u6700\u65B0\u7248\u672C\u7684Internet Explorer\u6216\u9009\u62E9\u53E6\u4E00\u4E2Aweb\u6D4F\u89C8\u5668.\u4E00\u4E2A\u5217\u8868\u6700\u6D41\u884C\u7684web\u6D4F\u89C8\u5668\u5728\u4E0B\u9762\u53EF\u4EE5\u627E\u5230.<br /><br /><h1 id='goon' style='font-size:20px;cursor:pointer;'>>>>\u7EE7\u7EED\u8BBF\u95EE</h1>" }; var option = $.extend(defaults, options); return this.each(function () { if (window.showIEAlert) {//条件注释判断IE8及以下才执行初始化判断 //if ( $.browser.msie ) { var $this = $(this); initialize($this, option.support, option.title, option.text); $("#goon").bind("click", function () { $("#ie-alert-overlay").hide(); $("#ie-alert-panel").hide(); }); } //if ie }); }; })(jQuery); </script> <style> /* CSS Stylesheet for IE Alert! plugin. * ==================IE Alert样式================== */ /* Overlay Background */ #ie-alert-overlay { width:100%; height:100%; background-image:url(/imgblog/20160624/1813257320.png); position: fixed; top: 0; left: 0; z-index:9999; } * html #ie-alert-overlay { /* fixed position hack for IE6 */ position: absolute; z-index:9999; } /* Pop Up Panel */ #ie-alert-panel { width:520px; height:331px; position:fixed; background: url(/imgblog/20160624/1813362322.png) no-repeat; background-position: -1px -109px ; top:50%; left:50%; margin:-201px 0 0 -296px; padding:72px 0 0 72px; _position:absolute; /* fixed position hack for IE6 */ _top:expression(300+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); /* top:300px hack for IE6 */ /* font settings */ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight:bold; color:#333; line-height:1.5em; z-index:10000; } #ie-alert-panel p { font-size:14px; width:486px; text-align:justify; } #ie-alert-panel img { border:0; } #ie-alert-panel span { font-size:18px; margin: 0 0 20px 0; display:block; padding:0; } #ie-alert-panel ul { list-style: none; margin:0; padding:0; } #ie-alert-panel li { float:left; margin:0 22px 0 0; } #ie-alert-panel li.last { margin-right:0; } #ie-alert-panel a { display:inline-block; } .browser { position: absolute; bottom:35px; } .chrome, .firefox, .ie9, .opera, .safari { background: url(/imgblog/20160624/1813362322.png) no-repeat; } /* browsers */ .chrome { background-position: 0 0; width: 73px; height: 96px; margin:0 4px 0 0; } .firefox { background-position: -292px 0; width: 73px; height: 98px; } .ie9 { background-position: -179px 0; width: 95px; height: 98px; } .opera { background-position: -90px 0; width: 73px; height: 98px; } .safari { background-position: -387px 0; width: 73px; height: 98px; margin:0 4px 0 0; } </style> <script type="text/javascript"> $(document).ready(function() { $("body").iealert(); }); </script> </head> <body> <div style="margin:200px auto; width:500px; border:1px #eee dashed; padding:20px;"> <h1>默认是低于IE8浏览器都会弹出提示框,大家想看到效果就用IE6、IE7来打开运行。已经做过修改,兼容jQuery1.9+以上的jQuery。需要注意的是jQuery2+不在支持IE8-浏览器,不要导入2+以上的jQuery,jQuery会支持报错,不是iealert.js的问题了。</h1> </div> </body> </html>
iealert.js样式图片素材如下
加支付宝好友偷能量挖...
原创文章,转载请注明出处:修改iealert.js支持jQuery1.9+