AlanSimpsonMe · June 16, 2018 23:31
diff --git a/CSS_Modal_Popup b/CSS_Modal_Popup
 <!DOCTYPE html>
 <html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="Pure CSS modal popup. https://alansimpson.me/html_css/codequickies/">
    <meta name="author" content="Alan Simpson">
 <head>
    <style>
        /* The mask and also target of href= */
        #popup {
            position: fixed;
            top: -100%;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
            z-index: 100;
        }

        /* This CSS applied when user clicks link with href="popup" */
        #popup:target {
            top: 0;
            transition: 1s;
        }

        /* This is the text and button in the popup */
        #popup .inner {
            display: table-cell;
            position: absolute;
            width: 320px;
            height: 140px;
            /* To center horizontally, 50% minus half the width */
            left: calc(50% - 160px);
            /* To center vertically, 50% minus half the height */
            top: calc(50% - 70px);
            text-align: center;
            vertical-align: middle;
            border: solid 1px black;
            border-radius: 4px;
            box-shadow: (2px 2px 2px rgba(0, 0, 0));
            background: white;
        }

        /* Make link look like a button */
        a.button {
            display: inline-block;
            border: solid 1px #ccc;
            border-radius: 5px;
            padding: 8px;
            margin: 6px 0;
            transition: 0.25s;
            background: #5484FF;
            color: white;
            text-decoration: none;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }

        /* Brief styling when link (button) clicked */
        a.button:active {
            border: inset 1px gray;
        }
    </style>
 </head>

 <body>
    <!-- This is the button you click to open popup -->
    <a href="#popup" class="button">Open Popup</a>

    <!-- This is the full-screen mask and popup text -->
    <div id="popup">
        <div class="inner">
            <h1>I am the popup</h1>
            <p>
                <a href="#" class="button">Close</a>
            </p>
        </div>
    </div>

 </body>

 </html>
	<!DOCTYPE html>
	<html>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="description" content="Pure CSS modal popup. https://alansimpson.me/html_css/codequickies/">
	<meta name="author" content="Alan Simpson">
	<head>
	<style>
	/* The mask and also target of href= */
	#popup {
	position: fixed;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .5);
	z-index: 100;
	}

	/* This CSS applied when user clicks link with href="popup" */
	#popup:target {
	top: 0;
	transition: 1s;
	}

	/* This is the text and button in the popup */
	#popup .inner {
	display: table-cell;
	position: absolute;
	width: 320px;
	height: 140px;
	/* To center horizontally, 50% minus half the width */
	left: calc(50% - 160px);
	/* To center vertically, 50% minus half the height */
	top: calc(50% - 70px);
	text-align: center;
	vertical-align: middle;
	border: solid 1px black;
	border-radius: 4px;
	box-shadow: (2px 2px 2px rgba(0, 0, 0));
	background: white;
	}

	/* Make link look like a button */
	a.button {
	display: inline-block;
	border: solid 1px #ccc;
	border-radius: 5px;
	padding: 8px;
	margin: 6px 0;
	transition: 0.25s;
	background: #5484FF;
	color: white;
	text-decoration: none;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	}

	/* Brief styling when link (button) clicked */
	a.button:active {
	border: inset 1px gray;
	}
	</style>
	</head>

	<body>
	<!-- This is the button you click to open popup -->
	<a href="#popup" class="button">Open Popup</a>

	<!-- This is the full-screen mask and popup text -->
	<div id="popup">
	<div class="inner">
	<h1>I am the popup</h1>
	<p>
	<a href="#" class="button">Close</a>
	</p>
	</div>
	</div>

	</body>

	</html>