Dismissible Banner Message

CSS

  <style>
        html,
        body {
            margin: 0;
        }
        
        .banner {
            background: #4ec0a4;
        }
        .banner__content {
            padding: 16px;
            max-width: 1000px;
            margin: 0 auto;
            display: flex;
            align-items: center;
        }
        .banner__text {
            flex-grow: 1;
            line-height: 1.4;
            color: #ffffff;
            font-family:KarlaBold, Arial, sans-serif;
            font-size: large;
        }
        .banner__close {
            background: none;
            border: none;
            cursor: pointer;
            color: #ffffff;
            font-size: x-large;
            font-weight: 900;
        }
        #BannerDiv {
            opacity: 1;
            max-height:100%;
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
        }
        #BannerDiv.dismiss {
            max-height: 0%;
            opacity: 0;
        }
    </style>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

JavaScript

<script language="javascript" type="text/javascript">

  let banner = document.getElementById('BannerDiv');

  if (window.location.href.indexOf("ShowBanner=TRUE") > -1) {

    document.getElementById('BannerDiv').style.display = "block";

  } else {

    document.getElementById('BannerDiv').style.display = "none";

  }

  document.querySelector(".banner__close").addEventListener("click", function () {

    banner.classList.toggle('dismiss');

  });

</script>

HTML

<div class="banner" id="BannerDiv">

  <div class="banner__content" >

    <div class="banner__text">

      <strong>[-- Banner Message!!! --]</strong>

    </div>

    <button class="banner__close" type="button"><span class="material-icons">close</span></button>

  </div>  

</div>