CSS Only Popup with JS Header Hider

snippet.html

<a href="#ab-pop">Click to open!</a>

<div id="ab-pop" class="modal-window">
  <div>
    <a href="#" title="Close" class="modal-close">Close</a>
    <h3>CAMPS OFFERED IN ALBERTA</h3>
    <div>Looking for Sport Camps in Alberta? Click on the sports below to register!</div>
    <a href="https://google.ca" target="_blank">Soccer</a>
    <a href="https://google.ca" target="_blank">Basketball</a>
  </div>
</div>

<style>
/* Huge thanks to https://codepen.io/timothylong/pen/HhAer */
.modal-window {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5) !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}
.modal-window:target {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.modal-window > div {
  width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2em !important;
  background: white !important;
  border-radius: 20px !important;
  text-align: center !important;
}
.modal-window header {
  font-weight: bold;
}
.modal-window h3 {
  font-size: 150%;
  margin: 0 0 15px;
}
.modal-window > div a:not(.modal-close) {
  display: block !important;
  background: #d2232a !important;
  color: white !important;
  width: -webkit-fill-available !important;
  width: fit-content !important;
  padding: 10px 20px !important;
  border-radius: 100px !important;
  margin: 8px auto !important;   
  transition: all ease 0.3s !important;
}
.modal-window > div a:not(.modal-close):hover {
  background: #a20000 !important;
  transition: all ease 0.3s !important;
}

.modal-close {
  color: #aaa !important;
  line-height: 50px !important;
  font-size: 80%;
  position: absolute;
  right: 0;
  text-align: center !important;
  top: 0;
  width: 70px;
  text-decoration: none !important;
}
.modal-close:hover {
  color: black;
}
  
/* Get the header out of the way */
header.fusion-header-wrapper.fusion-is-sticky.modal-open {
  opacity: 0 !important;
  pointer-events: none !important;
}
</style>
<script>
  jQuery('.map_wrapper').click(function(e){
    jQuery('header.fusion-header-wrapper.fusion-is-sticky').addClass('modal-open');
  });
  jQuery('.modal-close').click(function(e){
    jQuery('header.fusion-header-wrapper.fusion-is-sticky').removeClass('modal-open');
  });
</script>