Cacher is the code snippet organizer for pro developers

<?php if (is_page('Home')) { ?>
  <div id="fullpopup">
    <div id="fullpopupbg"></div>
    <div id="fullpopupbox">
      <div id="fullpopuptext">
        <img class="banner-logo" src="<?php the_field('logo', 'option');?>" alt="<?php echo get_bloginfo( 'name' ); ?>">
        <a aria-label="Close Popup" href="javascript:void(0);" id="btn-x"><i class="fal fa-times"></i></a>
        <h2>Virtual Tours Available</h2>
        <p>We are temporarily ceasing in-person tours with prospective residents.</p>
        <p>Call us today for more information.</p>
        <div><a class="btn" href="/virtual-tours/">VIEW OUR VIRTUAL TOURS&nbsp;&gt;</a></div>
      </div>
    </div>
  </div>
<?php } ?>

/*******************
POPUP
*******************/
$("#fullpopup #btn-x, #fullpopupbg").click(function(){
    	$("#fullpopup").fadeOut(500);
});


$( document ).ready(function() {
	if ($("body").hasClass("home")) {
	   $("#fullpopup").delay(500).fadeIn(500);
  }
}); // end doc ready

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  POPUP
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#fullpopup,
#fullpopupbg {
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 9999999999;
}

#fullpopup {
	display: none;
}

#fullpopupbg {
	background-color: fn-transparent-color($color-black, 0.65);
}

#fullpopupbox {
    width: 95%;
    max-width: 800px;
	background: #ffffff none repeat scroll 0 0;
	left: 50%;
	margin: 0;
	@include centerall();
	text-align: center;
	z-index: 9999999999;
}

#fullpopuptext {
	color: $color-tertiary;
	margin: 0.5em;
	padding: 3em 2em;

	.banner-logo {
		width: 50%;
		max-width: 250px;
		height: auto;
		margin: 0 auto 2em;
	}

  h2 {
		color: $color-tertiary;
	  text-transform: uppercase;
		font-size: 2.5em;
		line-height: 1.25em;
		margin: 0 0 1em;
	}

	p {
		color: $color-tertiary;
		font-size: 1.25em;
		line-height: 2em;
		padding: 0 0 1em;
		margin: 0;
	}

	a:link,a:visited,a:active {
		color: $color-primary;
		text-decoration: underline;
		&:hover {
			color: $color-black;
		}
	}

	a.btn:link,a.btn:visited,a.btn:active {
		display: inline-block;
		background-color: $color-primary;
		color: #ffffff;
		padding: 1em;
		text-decoration: none;
		font-weight: 500;
		margin: 1em auto 0;
		&:hover {
			background-color: darken($color-primary, 20%);
		}
	}

}

a#btn-x:link,
a#btn-x:visited,
a#btn-x:active,
a#btn-x:hover {
	color: $color-primary;
	font-size: 2em;
	float: right;
	font-weight: 900;
	margin: 0;
	padding: 7px 11px 5px;
	position: absolute;
	right: 10px;
	text-decoration: none;
	top: 10px;
}

a#btn-x:hover {
	color: $color-black;
}

@media (max-width: 600px) {

	#fullpopupbox {
		width: 90%;
	}

	#fullpopuptext {
		margin: 0.5em;
		padding: 2em;

		h2 {
			margin: 0 0 0.25em;
		}

		p {
			font-size: 1.25em;
			line-height: 1.2em;

			&.pop-up-disclaimer {
				font-size: 0.6rem;
				line-height: 1.5em;
			}
		}

	}

	a#btn-x:link {
		font-size: 1.2em;
	}
}

#fullpopup,
#fullpopupbg {
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 9999999999;
}

#fullpopup {
   display: none;
}

#fullpopupbg {
	background-color: rgba(0,0,0,0.65);
}

#fullpopupbox {
    width: 95%;
    max-width: 800px;
	background: white none repeat scroll 0 0;
	left: 50%;
	margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   -webkit-transform: translate(-50%,-50%);
   -moz-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   -o-transform: translate(-50%,-50%);
   text-align: center;
   z-index: 9999999999;
}

#fullpopuptext {
	color: black;
	margin: 0.5em;
	padding: 3em 2em;
}

#fullpopuptext .banner-logo {
   width: 50%;
   max-width: 250px;
   height: auto;
   margin: 0 auto 2em;
}

#fullpopuptext h2 {
   color: black;
  text-transform: uppercase;
   font-size: 2.5em;
   line-height: 1.25em;
   margin: 0 0 1em;
}

#fullpopuptext p {
   color: black;
   font-size: 1.25em;
   line-height: 2em;
   padding: 0 0 1em;
   margin: 0;
}

#fullpopuptext a:link,#fullpopuptext a:visited,#fullpopuptext a:active {
   color: black;
   text-decoration: underline;
}

#fullpopuptext a:link:hover,#fullpopuptext a:visited:hover,#fullpopuptext a:active:hover {
color: gray;
}

#fullpopuptext a.btn:link,#fullpopuptext a.btn:visited,#fullpopuptext a.btn:active {
   display: inline-block;
   background-color: black;
   color: white;
   padding: 1em;
   text-decoration: none;
   font-weight: 500;
   margin: 1em auto 0;
}

#fullpopuptext a.btn:link:hover,#fullpopuptext a.btn:visited:hover,#fullpopuptext a.btn:active:hover {
background-color: gray;
}

#fullpopuptext a#btn-x:link,
#fullpopuptext a#btn-x:visited,
#fullpopuptext a#btn-x:active,
#fullpopuptext a#btn-x:hover {
	color: gray;
	font-size: 2em;
	float: right;
	font-weight: 900;
	margin: 0;
	padding: 7px 11px 5px;
	position: absolute;
	right: 10px;
	text-decoration: none;
	top: 10px;
}

#fullpopuptext a#btn-x:hover {
	color: black;
}

@media (max-width: 600px) {

	#fullpopupbox {
		width: 90%;
	}

	#fullpopuptext {
		margin: 0.5em;
		padding: 2em;
	}

   #fullpopuptext h2 {
      margin: 0 0 0.25em;
   }

   #fullpopuptext p {
      font-size: 1.25em;
      line-height: 1.2em;
   }

   #fullpopuptext p.pop-up-disclaimer {
      font-size: 0.6rem;
      line-height: 1.5em;
   }


	#fullpopuptext a#btn-x:link {
		font-size: 1.2em;
	}
}

<script src="https://kit.fontawesome.com/c30e018d26.js" crossorigin="anonymous"></script>