Simple, cookied popup

site__content__popup.php

<?php
/*
 *
 *
 *
 *
 */
class Popup__Elm {


  public $id = NULL;
  public $name = NULL;


  public function __construct() {

	$this->id = NAMESPACE_make_id(6);

	$this->Popup__Elm__Callback();

	$this->scripts();
	$this->styles();
  }


  public function Popup__Elm__Callback(){
    add_shortcode( 'NAMESPACE_popup' , array( $this, 'NAMESPACE__content__popup_elm_callback'));
  }


 	/* NAMESPACE__content__popup_elm_callback
	 *
	 * Usage
	 * [btn &params ]
	 *
	 * Params
	 *
	 * @ param			- (optional)
	 */
	public function NAMESPACE__content__popup_elm_callback( $atts, $content = NULL ) {

		$a = shortcode_atts( array(
			'lnk' => '#',
			'lnk_trgt' => '_self',
			'name' => 'default',
		), $atts );

		$this->name = $atts['name'] ?? 'default';

		$class = 'NAMESPACEpopup__container';
		$class .= ' NAMESPACEpopup__container--'.$this->name;

		$lnk = $atts['lnk'] ?? '#';
		$lnk_trgt = $atts['lnk_trgt'] ?? '_self';

		ob_start();
		?>

		<div id="<?php echo $this->id; ?>" class="<?php echo $class; ?>" style="display:none;">
			<div class="NAMESPACEpopup__inner">
				<span class="NAMESPACEpopup__close" onclick="remove_NAMESPACE_popup(this)"><i class="material-icons">close</i></span>
				<a class="NAMESPACEpopup__link" href="<?php echo $lnk; ?>" target="<?php echo $lnk_trgt; ?>"/>
					<?php echo $content; ?>
				</a>
			</div>
		</div>

		<?php return ob_get_clean(); ?>
	<?php
	}


	private function styles() {
		ob_start(); ?>

		#<?php echo $this->id; ?> {
		    position: fixed !important;
		    z-index: 999999;
		    background: rgba(0, 0, 0, 0.75);
		    top: 0px;
		    left: 0px;
		    height: calc( 100vh );
		    width: calc( 100vw );
		    overflow: hidden;
		    opacity: 1;
		}
		#<?php echo $this->id; ?> .NAMESPACEpopup__inner {
		    position: fixed !important;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		#<?php echo $this->id; ?> .NAMESPACEpopup__inner img {
			display: block;
			position: relative;
			height: auto;
			width: auto;
			margin: 0px auto;
		}
		#<?php echo $this->id; ?> .NAMESPACEpopup__inner span.NAMESPACEpopup__close {
		    position: relative;
		    display: block;
		    width: 100%;
		    text-align: right;
		    color: white;
		    cursor: pointer;
		}
		@media only screen and (max-width: 600px) {}
		@media only screen and (min-width: 48rem) {}
		@media only screen and (min-width: 64rem) {}
		@media only screen and (min-width: 80rem) {}

		<?php
		$NAMESPACE__Popup__Styles = ob_get_clean();
		// only enqueue styles if they're not already enqueued.
		if ( ! wp_style_is( 'NAMESPACE-module-styles', 'enqueued' ) ) {
			wp_register_style( 'NAMESPACE-module-styles', FALSE );
			wp_enqueue_style( 'NAMESPACE-module-styles' );
		}
		wp_add_inline_style( 'NAMESPACE-module-styles', $NAMESPACE__Popup__Styles );
	}


	private function scripts() {
		ob_start();
		/* See https://www.quirksmode.org/js/cookies.html for Basic Cookies

		var cookie = readCookie("<?php echo $this->name; ?>");
		if (cookie) {
			console.log("Cookie was found!");
		} else {
			console.log("Cookie was not found!");
			createCookie("<?php echo $this->name; ?>", "Cookie <?php echo $this->name; ?> Set" , 3);
		}

		*/
		?>

		if (navigator.userAgent.indexOf("Safari") != -1 && navigator.userAgent.indexOf("Chrome") == -1) {
			console.log("For Safari-like browsers, we can\'t use setTimeout.");
			document.getElementById("<?php echo $this->id; ?>").style.display = "block";
		}
		setTimeout(function() {
			console.log("<?php echo $this->name; ?> popup shown.");
			document.getElementById("<?php echo $this->id; ?>").style.display = "block";
		}, 3000 );

		function remove_NAMESPACE_popup(e) {
		  var parent = e.parentNode.parentNode;
		  parent.remove();
		}

		<?php
		$NAMESPACE__Popup__Scripts = ob_get_clean();
		// only enqueue styles if they're not already enqueued.
		if ( ! wp_script_is( 'NAMESPACE-module-scripts', 'enqueued' ) ) {
			wp_register_script( 'NAMESPACE-module-scripts', FALSE, array(), '1.0.1' );
			wp_enqueue_script( 'NAMESPACE-module-scripts' );
		}
		wp_add_inline_script( 'NAMESPACE-module-scripts', $NAMESPACE__Popup__Scripts );
	}


} // close the NAMESPACE__Popup() Class


/* Call the Popup__Elm__Shortcode() Class to activate shortcode
 *
 *
 */

add_action('wp_head','activate_popup_elm_shortcode');
function activate_popup_elm_shortcode(){

	new Popup__Elm();

}










/* the cold, final swig of coffee */ ?>