Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


                <h1>A11y Modal</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing enim eu turpis egestas pretium aenean pharetra magna. Purus in mollis nunc sed id semper. Metus aliquam eleifend mi in nulla posuere. Iaculis at erat pellentesque adipiscing. Adipiscing commodo elit at imperdiet dui accumsan sit. Leo in vitae turpis massa sed elementum tempus egestas sed. Quam id leo in vitae turpis massa. Dignissim cras tincidunt lobortis feugiat. Justo nec ultrices dui sapien eget mi proin sed. Est sit amet facilisis magna etiam tempor orci eu. Tellus molestie nunc non blandit massa. Facilisi morbi tempus iaculis urna id. Consectetur a erat nam at. Nisl rhoncus mattis rhoncus urna neque. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. A iaculis at erat pellentesque adipiscing commodo elit at. Aenean euismod elementum nisi quis eleifend quam. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Eget nulla facilisi etiam dignissim diam quis enim. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Viverra aliquet eget sit amet. Magnis dis parturient montes nascetur ridiculus. Mi proin sed libero enim sed faucibus turpis in. Faucibus turpis in eu mi bibendum neque. Arcu ac tortor dignissim convallis. Pharetra massa massa ultricies mi. Quisque sagittis purus sit amet volutpat consequat mauris nunc. In eu mi bibendum neque egestas congue quisque egestas. Enim nunc faucibus a pellentesque sit amet porttitor eget. Id ornare arcu odio ut sem nulla pharetra diam. Amet consectetur adipiscing elit ut. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Tellus elementum sagittis vitae et leo duis ut diam. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Pretium vulputate sapien nec sagittis aliquam. Quam vulputate dignissim suspendisse in est ante. Velit egestas dui id ornare arcu. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Libero nunc consequat interdum varius sit. Amet risus nullam eget felis eget nunc lobortis. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Diam sit amet nisl suscipit adipiscing. In ornare quam viverra orci sagittis eu volutpat odio. Vulputate odio ut enim blandit. Ut tortor pretium viverra suspendisse potenti nullam ac tortor. Nulla facilisi nullam vehicula ipsum a arcu cursus. Consequat mauris nunc congue nisi vitae suscipit tellus. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Mi sit amet mauris commodo. Sagittis vitae et leo duis ut. Erat imperdiet sed euismod nisi porta lorem mollis. Consectetur a erat nam at. Et leo duis ut diam quam nulla. Lorem donec massa sapien faucibus et. Turpis egestas maecenas pharetra convallis posuere morbi. Enim eu turpis egestas pretium aenean pharetra. Ullamcorper a lacus vestibulum sed arcu. Sagittis nisl rhoncus mattis rhoncus. Turpis egestas integer eget aliquet nibh. Sit amet venenatis urna cursus eget nunc scelerisque. Nullam non nisi est sit amet facilisis magna. Libero enim sed faucibus turpis in eu mi bibendum neque. At imperdiet dui accumsan sit. Velit egestas dui id ornare arcu odio ut. Lectus mauris ultrices eros in cursus. Lorem mollis aliquam ut porttitor leo a diam. Eget nunc scelerisque viverra mauris in aliquam sem. Aliquam etiam erat velit scelerisque in dictum. Et tortor at risus viverra adipiscing at in tellus. Eget sit amet tellus cras adipiscing enim eu turpis egestas. Sed velit dignissim sodales ut eu. Ornare aenean euismod elementum nisi quis. Viverra justo nec ultrices dui sapien eget mi proin sed. Lorem sed risus ultricies tristique nulla. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices gravida. Justo laoreet sit amet cursus sit amet dictum. Sed id semper risus in hendrerit gravida rutrum.Leo a diam sollicitudin tempor. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Suspendisse sed nisi lacus sed viverra tellus in. Netus et malesuada fames ac turpis egestas integer. Egestas purus viverra accumsan in nisl nisi scelerisque eu ultrices. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Tempus quam pellentesque nec nam aliquam sem. Viverra vitae congue eu consequat ac felis donec. Nec nam aliquam sem et. Facilisi morbi tempus iaculis urna id.Arcu odio ut sem nulla pharetra. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Sit amet dictum sit amet justo donec enim diam vulputate. Proin sed libero enim sed faucibus turpis in. Massa id neque aliquam vestibulum morbi blandit cursus. Maecenas ultricies mi eget mauris pharetra et ultrices neque.</p>

<button onclick="openModal()">Open modal</button>

<div class="modal">
	<dialog id="awesomeModal" class="modal__content" aria-labelledby="modalTitle" aria-describedby="modalDescription">
		<button class="modal__close" aria-label="Close this dialog window" data-cooltipz-dir="top" onclick="closeModal()">&times;</button>

		<h2 id="modalTitle">Modal Header</h2>

		<p id="modalDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tristique senectus et netus et malesuada fames ac.</p>
	<div class="modal__overlay" onclick="closeModal()"></div>


                body {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 2rem;

.modal {
	&__overlay {
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.8);
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;

	&__content {
		background-color: #fff;
		z-index: 3;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
		padding: 1rem;
		max-width: 90%;
		width: 37rem;
		border-radius: 2px;
		border: 3px solid #000;

		&:not([open]) + .modal__overlay {
			display: none;

	&__content {
		h1 {
			margin: 0;
			font-size: 1.25rem;

		@media (min-width: 44em) {
			padding: 2rem;

	&__close {
		position: absolute !important;
		top: 0.5rem;
		right: 0.5rem;
		border: 0;
		padding: 0;
		background-color: transparent;
		font-weight: bold;
		font-size: 1.25rem;
		width: 1.2rem;
		height: 1.2rem;
		text-align: center;
		cursor: pointer;
		transition: 0.15s;

		@media (min-width: 44em) {
			top: 1rem;
			right: 1rem;



                document.addEventListener("keyup", escapeKeyHandler);

function escapeKeyHandler(e) {
	if (e.keyCode === 27 || e.key === "Escape") {

function closeModal() {

function openModal() {
	document.getElementById("awesomeModal").setAttribute("open", "open");