Advanced Search

IE Outdated Browse Warning & Update options

/ Published in: HTML
Save to your folder(s)
Simple mix of basic CSS, HTML, and jQuery to detect IE and display a message to the user encouraging them to update.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!--  
  2.  
  3.    OBVIOUSLY YOU WOULD PUT THE STYLES AND SCRIPTS IN EXTERNAL FILES...
  4.  
  5. -->
  6. <!DOCTYPE HTML>
  7. <html>
  8. <head>
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  10. <title>Error Message</title>
  11. <style>
  12. #ie-box { display: none; } /* this goes in your main stylesheet */
  13. </style>
  14. <!--[if lt IE 9]>
  15. <style>
  16. /* Internet Explorer Warning Message */
  17. #ie-box { display: block; position: absolute; height: 100%; width: 100%; z-index: 100 }
  18. #ie-warning-overlay { background: #000; height: 100%; width: 100%; overflow: hidden; position: fixed; z-index: 110 }
  19. #ie-warning-wrap { background: #FFF; position: absolute; z-index: 120; height: 300px; width: 500px; left: 50%; top: 50%; margin-top: -150px; margin-left: -250px }
  20. #ie-warning-wrap #ie-warning-msg { padding: 15px; position: relative; text-align: left }
  21. #ie-warning-wrap #ie-warning-msg h3 { padding: 10px; color: #fff; background-color: #990000 }
  22. #ie-warning-wrap a.close { z-index: 150; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight:bold; position: absolute; bottom: 15px; right: 15px; text-decoration: underline }
  23. #ie-warning-wrap #ie-warning-msg p { margin-bottom: 15px }
  24. #ie-warning-wrap a,
  25. #ie-warning-wrap a:visited { color: #990000 }
  26. #ie-warning-wrap #ie-warning-msg ol li span { font-style: italic; color: #999999 }
  27. .transparent { /* IE 8 */
  28.   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */
  29.   filter: alpha(opacity=50); /* Netscape */
  30.   -moz-opacity: 0.5; /* Safari 1.x */
  31.   -khtml-opacity: 0.5; /* Good browsers */
  32.   opacity: 0.5 }
  33. .opaque { /* IE 8 */
  34.   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 5-7 */
  35.   filter: alpha(opacity=100); /* Netscape */
  36.   -moz-opacity: 1; /* Safari 1.x */
  37.   -khtml-opacity: 1; /* Good browsers */
  38.   opacity:1 }
  39. </style>
  40. <![endif]-->
  41. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  42. <script>
  43.  
  44. /* Add Close function for IE Modal */
  45. $('.close').bind('click',function(e){
  46. 	e.preventDefault();
  47. 	$('#ie-box').fadeOut('slow');
  48. });
  49.  
  50. </script>
  51. </head>
  52. <body>
  53.  
  54. <div id="ie-box">
  55.   <div id="ie-warning-overlay" class="transparent"></div>
  56.   <div id="ie-warning-wrap" class="opaque"> <a href="#" class="close">close this window</a>
  57.     <div id="ie-warning-msg">
  58.       <h3>WARNING!</h3>
  59.       <p>You are using an old version of Internet Explorer that may cause this site to display improperly or not at all.</p>
  60.       <p>Please consider downloading one of the following browsers to get the optimal user experience:</p>
  61.       <ol>
  62.         <li><strong>Google Chrome:</strong> <a href="https://www.google.com/chrome" target="_blank">Download from Google</a> <span>- Recommended</span></li>
  63.         <li><strong>Mozilla FireFox:</strong> <a href="http://www.mozilla.org/en-US/firefox/new/" target="_blank">Download from Mozilla</a></li>
  64.         <li><strong>Internet Explorer 9:</strong> <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home" target="_blank">Download from Microsoft</a></li>
  65.       </ol>
  66.       <p>If you wish to continue you may close this window, but it is highly recommended that you update first.</p>
  67.     </div>
  68.   </div>
  69. </div>
  70.  
  71. </body>
  72. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.