warning

warning check ie9.html

Zo check je ie9 en lager

<!--[if lte IE  9]>
<![endif]-->

warning.html

<div class="warning">
    <div class="warning__content">
        <div class="warning__top">
            <img src="images/close.png" class="warning__close" alt="">
            <span class="warning__title"><img src="images/sad-face.png" class="warning__sadface" alt="">U gebruikt een verouderde en onveilige browser</span>
            <span class="warning__text">Voor een prettig en veilig gebruik van de website raden wij u aan om gebruik te maken van een andere internet browser.</span>
            <div class="warning__options">
                <a href="https://www.google.com/chrome/browser/desktop/index.html" target="_blank" class="warning__option">
                    <span class="option__icon">
                        <img src="images/chrome.png" alt="">
                    </span>
                    <span class="option__text">
                        <span class="option__title">Google Chrome</span>
                        <span class="option__link">Download</span>
                    </span>
                </a>
                <a href="https://www.mozilla.org/nl/firefox/new/" target="_blank" class="warning__option">
                    <span class="option__icon">
                        <img src="images/firefox.png" alt="">
                    </span>
                    <span class="option__text">
                        <span class="option__title">Mozilla Firefox</span>
                        <span class="option__link">Download</span>
                    </span>
                </a>
            </div>
        </div>
        <a href="http://www.nu.nl/internet/4193530/microsoft-stopt-ondersteuning-oudere-versies-internet-explorer.html" target="_blank" class="warning__bottom">
            <span class="news__icon">
                <img src="images/ie9.png" class="news__ie9" alt="">
            </span>
            <span class="news__text">
                <span class="news__title">Microsoft stopt ondersteuning oudere versies Internet Explorer</span>
                <span class="news__link">Door: NU.nl</span>
            </span>
            <img src="images/arrow.png" class="news__arrow" alt="">
        </a>
    </div>
</div>
<div class="warningbutton">
    <img src="images/exclamation-mark.png" alt="">
    <span>Browser support</span>
</div>

warning.js

$(".warning__close").click(function () {
    $("html").removeClass("warning__open");
});

$(".warningbutton").click(function () {
    $("html").addClass("warning__open");
});



in de head
<script type="text/javascript">
  $(function() {
      $("body").append( "<h1>hoi</h1>" );
      $("html").addClass( "warning__open" );
  })
</script>

warning.scss

/* fallback */
.warning__open{
    overflow: hidden;
    padding-right: 17px;
    .header-top{
        padding-right: 17px;
    }
    .warning{
        display: block
    }
}
.warning{
    position: fixed;
    display: none;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0px;
    background-color: rgba(211, 211, 211, 0.85);
    z-index: 55555;
}
.warning__content{
    background-color: #fff;
    position: absolute;
    display: block;
    height: 500px;
    width: 920px;
    left: 50%;
    top: 15%;
    margin-left: -460px;
    border-radius: 20px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.warning__top{
    padding: 65px;
    height: 400px;
}
.warning__bottom{
    background-color: #F4F4F4;
    padding: 25px 0px;
    height: 100px;
    display: block;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    transition: all 150ms ease-in-out;
    &:hover, &:focus{
        background-color: darken(#F4F4F4, 3);
        transition: all 150ms ease-in-out;
        .news__arrow{
            right: 0px;
            transition: all 150ms ease-in-out;
        }
    }
}
.warning__close{
    position: absolute;
    right: -29.5px;
    top: -29.5px;
    width: 59px;
    height: 59px;
    cursor: pointer;
}
.warning__title{
    font-size: 30px;
    font-weight: 300;
    color: #647781;
    display: block;
    width: 100%;
    text-align: center;
    position: relative;
}
.warning__text{
    font-size: 20px;
    font-weight: 300;
    color: #647781;
    display: block;
    width: 100%;
    text-align: center;
    max-width: 70%;
    margin: 30px auto 45px;
    line-height: 27.5px;
}
.news__icon{
    float: left;
    width: 125px;
    height: 100px;
    display: block;
    border-bottom-left-radius: 20px;
    img{
        margin: 0 auto;
        display: block;
    }
}
.news__arrow{
    float: right;
    position: relative;
    top: -3px;
    right: 10px;
    transition: all 150ms ease-in-out;
}
.news__text{
    display: block;
    float: left;
}
.news__title{
    font-size: 20px;
    font-weight: 300;
    color: #8C99A0;
    display: block;
}
.news__link{
    font-size: 12px;
    font-weight: bold;
    color: #1D93DC;
}
.option__icon{
    padding: 31px 35.5px;
    float: left;
    img{
        width: 54px;
        height: 54px;
    }
}
.option__text{
    padding: 33px 0px;
    float: left;
    width: 160px;
}
.option__title{
    font-size: 20px;
    font-weight: 300;
    color: #647781;
}
.option__link{
    color: #1D93DC;
    font-size: 12px;
}
.warning__sadface{
    position: absolute;
    top: -4px;
    left: 0px;
    animation: warning 5s infinite;
    animation-timing-function: ease-in-out;
}
@keyframes warning {
    0% {
        transform: rotate(35deg);
    }
    50% {
        transform: rotate(-35deg);
    }
    100% {
        transform: rotate(35deg);
    }
}
.warning__options{
    width: 690px;
    display: block;
    margin: 0 auto;
}
.warning__option{
    width: 305px;
    height: 118px;
    float: left;
    border-radius: 10px;
    border: 1px solid #dce0e2;
    margin: 0px 20px;
    background-color: #fff;
    transition: all 150ms ease-in-out;
    &:hover, &:focus{
        background-color: #F4F4F4;
        transition: all 150ms ease-in-out;
    }
}
.warningbutton{
    position: fixed;
    bottom: 0px;
    left: 25px;
    cursor: pointer;
    margin-right: 15px;
    font-weight: bold;
    font-size: 20px;
    color: #e2574c;
    display: block;
    padding-top: 5px;
    img{
        float: left;
        width: 35px;
        margin-right: 15px;
        position: relative;
        bottom: 5px;
    }
}