josephabrahams · August 29, 2015 14:06 · josephabrahams · Sep 13, 2014
diff --git a/lt-ie9.html b/lt-ie9.html
 <!doctype html>
 <html lang="en-US">
    <head>
        <title>LT IE9</title>
        <meta charset="utf-8">
        <style>
            html, body {
                height: 100%;
            }
            body {
                margin: 0;
            }
            .warning-background {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                background-color: #323330;
                opacity: 0.6;
                filter: alpha(opacity=60);
                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
                z-index: 99998;
            }
            .warning-background-no-js {
                display: block;
            }
            .warning-modal {
                display: none;
                position: fixed;
                top: 50%;
                left: 50%;
                height: 548px;
                width: 500px;
                margin-top: -274px;
                margin-left: -250px;
                text-align: center;
                border-radius: 7px;
                font-family: Helvetica, Arial, sans-serif;
                font-style: normal;
                font-weight: bold;
                z-index: 99999;
            }
            .warning-modal a {
                text-decoration: underline;
            }
            .warning-modal-lt-ie9 {
                background-color: #00CCFF;
                color: #FFF;
            }
            .warning-modal-lt-ie9 a {
                color: #FFF;
            }
            .warning-modal-no-js {
                display: block;
                background-color: #F0DB4F;
                color: #323330;
            }
            .warning-modal-no-js a {
                color: #323330;
            }
            .warning-modal-title {
                margin: 0 40px;
                padding: 40px 20px;
                font-size: 66px;
                line-height: 66px;
            }
            .warning-modal-message {
                margin: 0 40px;
                border-top: 1px dotted #323330;
                padding: 40px 20px 0;
                font-size: 39px;
                line-height: 1.25;
            }
        </style>
    </head>
    <body>
        <!--[if lt IE 9]>
            <div class="warning-background"></div>
            <div class="warning-modal warning-modal-lt-ie9">
                <p class="warning-modal-title">Internet Explorer?</p>
                <p class="warning-modal-message">You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade</a> to improve your experience.</p>
            </div>
        <![endif]-->

        <noscript>
            <div class="warning-background warning-background-no-js"></div>
            <div class="warning-modal warning-modal-no-js">
                <p class="warning-modal-title">JavaScript disabled!</p>
                <p class="warning-modal-message">Please turn on JavaScript in order to view this site or try <a href="http://browsehappy.com/">upgrading your browser</a>.</p>
            </div>
        </noscript>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

        <!--[if lt IE 9]>
            <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
            <script>
                (function($, window, document, undefined) {
                    $(document).ready(function() {
                        var $warningModal = $('.warning-modal'),
                            $warningBackground = $('.warning-background');
                        
                        if (!$.cookie('LTIE9')) {
                            $warningModal.fadeIn();
                            $warningBackground.fadeIn();

                            $warningModal.click(function() {
                                $warningModal.fadeOut();
                                $warningBackground.fadeOut();
                            });

                            $warningBackground.click(function() {
                                $warningModal.fadeOut();
                                $warningBackground.fadeOut();
                            });

                            $.cookie('LTIE9', true);
                        }
                    });
                })(jQuery, window, document);
            </script>
        <![endif]-->
    </body>
 </html>
	<!doctype html>
	<html lang="en-US">
	<head>
	<title>LT IE9</title>
	<meta charset="utf-8">
	<style>
	html, body {
	height: 100%;
	}
	body {
	margin: 0;
	}
	.warning-background {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #323330;
	opacity: 0.6;
	filter: alpha(opacity=60);
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
	z-index: 99998;
	}
	.warning-background-no-js {
	display: block;
	}
	.warning-modal {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	height: 548px;
	width: 500px;
	margin-top: -274px;
	margin-left: -250px;
	text-align: center;
	border-radius: 7px;
	font-family: Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: bold;
	z-index: 99999;
	}
	.warning-modal a {
	text-decoration: underline;
	}
	.warning-modal-lt-ie9 {
	background-color: #00CCFF;
	color: #FFF;
	}
	.warning-modal-lt-ie9 a {
	color: #FFF;
	}
	.warning-modal-no-js {
	display: block;
	background-color: #F0DB4F;
	color: #323330;
	}
	.warning-modal-no-js a {
	color: #323330;
	}
	.warning-modal-title {
	margin: 0 40px;
	padding: 40px 20px;
	font-size: 66px;
	line-height: 66px;
	}
	.warning-modal-message {
	margin: 0 40px;
	border-top: 1px dotted #323330;
	padding: 40px 20px 0;
	font-size: 39px;
	line-height: 1.25;
	}
	</style>
	</head>
	<body>
	<!--[if lt IE 9]>
	<div class="warning-background"></div>
	<div class="warning-modal warning-modal-lt-ie9">
	<p class="warning-modal-title">Internet Explorer?</p>
	<p class="warning-modal-message">You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade</a> to improve your experience.</p>
	</div>
	<![endif]-->

	<noscript>
	<div class="warning-background warning-background-no-js"></div>
	<div class="warning-modal warning-modal-no-js">
	<p class="warning-modal-title">JavaScript disabled!</p>
	<p class="warning-modal-message">Please turn on JavaScript in order to view this site or try <a href="http://browsehappy.com/">upgrading your browser</a>.</p>
	</div>
	</noscript>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

	<!--[if lt IE 9]>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<script>
	(function($, window, document, undefined) {
	$(document).ready(function() {
	var $warningModal = $('.warning-modal'),
	$warningBackground = $('.warning-background');

	if (!$.cookie('LTIE9')) {
	$warningModal.fadeIn();
	$warningBackground.fadeIn();

	$warningModal.click(function() {
	$warningModal.fadeOut();
	$warningBackground.fadeOut();
	});

	$warningBackground.click(function() {
	$warningModal.fadeOut();
	$warningBackground.fadeOut();
	});

	$.cookie('LTIE9', true);
	}
	});
	})(jQuery, window, document);
	</script>
	<![endif]-->
	</body>
	</html>