jQuery addClass example

Change class name on click in jQuery

by ian_smithz

HTML

<div class="downtime-modal" id="downtime-modal" tabindex="-1" role="dialog" aria-labelled-by="downtime-modal-title">
  <div class="downtime-modal-content">

    <h2 id="downtime-modal-title">Coronavirus (COVID-19) update</h2>

    <p>Due to ongoing Coronavirus (COVID-19) situation our IE website will temporarily be closed for all orders until further notice. </p>

    <p>Orders currently out for delivery will be subject to courier restrictions and your order could be significantly delayed. </p>

    <p>Please go to <a href="https://www.parcelforce.com/service-updates">Parcelforce Service Updates</a> for specific updates on your country. </p>
    <p>Orders that have not yet been fully processed will be cancelled and you will be contacted by our customer service team at the earliest opportunity. </p>

    <p>Information on orders and customer personal details can be viewed in your account section <a href="https://www.screwfix.ie/loginpage/">screwfix.ie/loginpage/</a> for any other customer queries please email <a href="mailto:[email protected]">[email protected]</a></p>

  </div> 
</div> 

<style>
.downtime-modal {
  background-color: rgba(0,0,0,0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 12;
  left: 0;
  top: 0;
  overflow-y: scroll;
  display: none;
}

.downtime-modal--visible {
  display: flex;
  justify-content: center;
  align-items: center;
}

.downtime-modal-content {
  background-color: rgb(255, 255, 255);
  min-height: 200px;
  width: 70%;
  padding: 1.5rem;
  position: relative;
}

.downtime-modal-content p {
  margin-bottom: 1rem;
}

.downtime-modal-content a:focus {
  outline: none;
}

.downtime-modal-close {
  background-color: #000000;
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.downtime-modal-close:focus{
  background: #ededed;
  background-image: none;
  background-image: -webkit-linear-gradient(top,#f9f9f9 0,#ededed 50%,#e2e2e2 50%,#d1d1d1 100%);
  background-image: linear-gradient(to bottom,#f9f9f9 0%,#ededed...