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