gender-voice-visualization/ui/popup.html

<style>
	.popup {
		max-width: 500px;
		width: 400px;
		margin: 1em;
		margin-left: calc(-200px);
		padding: 1em;
		padding-right: 2em;
		color: black;
		background: white;
		border: 2px solid whitesmoke;
		box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, .25);
		position: fixed;
		top: 0px;
		left: 50%;
		z-index: 99999999999999;
		transition: all 1s;
		border-radius: .25em;
	}
	.popup button.close {
		background: none;
		border: none;
		box-shadow: none;
		font-size: 200%;
		color: grey;
		position: absolute;
		top: 0px;
		right: 0px;
	}
	.popup.offscreen {
		top: -300px;
		opacity: 0;
	}
</style>
<div class="popup offscreen">
Please complete <a href="https://brown.co1.qualtrics.com/jfe/form/SV_4PgW7EKNvnxnWLk">our survey</a>
to help us in our research.
<button class="close" onclick="$('.popup').classList.add('offscreen')">×</button>
</div>
<script>
//setTimeout(() => $('.popup').classList.remove('offscreen'), 30000);
</script>