modal/index.html

<!DOCTYPE html>
<html>
<head>
<script type="text/hyperscript" src="modal.hs"></script>
<script src="https://unpkg.com/htmx.org"></script>
<script src="https://unpkg.com/hyperscript.org"></script>
</head>
<body>

    <div class="page">
        <h1>Modal Example</h1>
        <p>This opens and closes a modal dialog</p>

        <!-- The hx-target and hx-push-url attribute can be replaced 
        by response headers from your server (HX-Retarget, and HX-Push, respectively).
        They're only included in this demo because we aren't using a server to generate responses. -->
        <button hx-get="modal-content.html" hx-target="aside" hx-push-url="false">Open Dialog</button>
    </div>

    <!-- 
    This <aside> is where the modal will go.  Putting it in a separate 
    element means that you can refresh your main page content independently
    of the modal dialog. -->
    <aside></aside>


<style>

/***** MODAL DIALOG ****/

#modal {
	/* Underlay covers entire screen. */
	position: fixed;
	top:0px;
	bottom: 0px;
	left:0px;
	right:0px;
	z-index:1000;

	/* Flexbox centers the .modal-content vertically and horizontally */
	display:flex;
	flex-direction:column;
	align-items:center;

	/* Animate when opening */
	animation-name: fadeIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal > .modal-underlay {
	/* underlay takes up the entire viewport. This is only
	required if you want to click to dismiss the popup */
	position: absolute;
	z-index: -1;
	top:0px;
	bottom:0px;
	left: 0px;
	right: 0px;
	background-color:black;
	opacity: 0.6;
}

#modal > .modal-content {
	/* Position visible dialog near the top of the window */
	margin-top:10vh;

	/* Sizing for visible dialog */
	width:80%;
	max-width:600px;

	/* Display properties for visible dialog*/
	border:solid 1px #444;
	border-radius:8px;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
	background-color:#fff;
	padding:20px;

	/* Animate when opening */
	animation-name:zoomIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal.closing {
	/* Animate when closing */
	animation-name: fadeOut;
	animation-duration:150ms;
	animation-timing-function: ease;

	/* Hide after animation */
	opacity:0;
}

#modal.closing > .modal-content {
	/* Aniate when closing */
	animation-name: zoomOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

/** ANIMATIONS ***********/
@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
} 

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
} 

@keyframes zoomIn {
	0% {transform: scale(0.9);}
	100% {transform: scale(1);}
} 

@keyframes zoomOut {
	0% {transform: scale(1);}
	100% {transform: scale(0.9);}
} 


/** Cheapo Styling for HTML Form **********/
*{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

form label {
	display:block;
	margin-bottom:20px;
}
</style>
</body>