Posted By

thewickedchemist on 12/14/11


Tagged

ie check browser


Versions (?)

IE Outdated Browse Warning & Update options


 / Published in: HTML
 

Simple mix of basic CSS, HTML, and jQuery to detect IE and display a message to the user encouraging them to update.

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

Report this snippet  

You need to login to post a comment.