Revision: 54184
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at December 14, 2011 05:39 by thewickedchemist
Initial Code
<!-- OBVIOUSLY YOU WOULD PUT THE STYLES AND SCRIPTS IN EXTERNAL FILES... --> <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Error Message</title> <style> #ie-box { display: none; } /* this goes in your main stylesheet */ </style> <!--[if lt IE 9]> <style> /* Internet Explorer Warning Message */ #ie-box { display: block; position: absolute; height: 100%; width: 100%; z-index: 100 } #ie-warning-overlay { background: #000; height: 100%; width: 100%; overflow: hidden; position: fixed; z-index: 110 } #ie-warning-wrap { background: #FFF; position: absolute; z-index: 120; height: 300px; width: 500px; left: 50%; top: 50%; margin-top: -150px; margin-left: -250px } #ie-warning-wrap #ie-warning-msg { padding: 15px; position: relative; text-align: left } #ie-warning-wrap #ie-warning-msg h3 { padding: 10px; color: #fff; background-color: #990000 } #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 } #ie-warning-wrap #ie-warning-msg p { margin-bottom: 15px } #ie-warning-wrap a, #ie-warning-wrap a:visited { color: #990000 } #ie-warning-wrap #ie-warning-msg ol li span { font-style: italic; color: #999999 } .transparent { /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good browsers */ opacity: 0.5 } .opaque { /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 5-7 */ filter: alpha(opacity=100); /* Netscape */ -moz-opacity: 1; /* Safari 1.x */ -khtml-opacity: 1; /* Good browsers */ opacity:1 } </style> <![endif]--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> /* Add Close function for IE Modal */ $('.close').bind('click',function(e){ e.preventDefault(); $('#ie-box').fadeOut('slow'); }); </script> </head> <body> <div id="ie-box"> <div id="ie-warning-overlay" class="transparent"></div> <div id="ie-warning-wrap" class="opaque"> <a href="#" class="close">close this window</a> <div id="ie-warning-msg"> <h3>WARNING!</h3> <p>You are using an old version of Internet Explorer that may cause this site to display improperly or not at all.</p> <p>Please consider downloading one of the following browsers to get the optimal user experience:</p> <ol> <li><strong>Google Chrome:</strong> <a href="https://www.google.com/chrome" target="_blank">Download from Google</a> <span>- Recommended</span></li> <li><strong>Mozilla FireFox:</strong> <a href="http://www.mozilla.org/en-US/firefox/new/" target="_blank">Download from Mozilla</a></li> <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> </ol> <p>If you wish to continue you may close this window, but it is highly recommended that you update first.</p> </div> </div> </div> </body> </html>
Initial URL
Initial Description
Simple mix of basic CSS, HTML, and jQuery to detect IE and display a message to the user encouraging them to update.
Initial Title
IE Outdated Browse Warning & Update options
Initial Tags
ie, browser
Initial Language
HTML