index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS Modal - Modals build out of pure CSS</title>

		<meta name="viewport" content="width=device-width">

		<!-- Link to the built CSS -->
		<link rel="stylesheet" href="tests/modal.css">

		<style>
			.content {
				max-width: 400px;
			}
		</style>
	</head>
	<body>

		<h1>CSS Modal</h1>
		<p>Please check out the website for more information on how to use the modal.</p>

		<h2>Examples</h2>

		<!-- Call the modal by clicking this link -->
		<ul>
			<li><a href="#modal-show" title="Clicking this link shows the modal">Demo Show</a></li>
			<li><a href="#modal-fade" title="Clicking this link shows the modal">Demo Fade</a></li>
			<li><a href="#modal-zoomin" title="Clicking this link shows the modal">Demo ZoomIn</a></li>
			<li><a href="#modal-plainscreen" title="Clicking this link shows the modal">Demo PlainScreen</a></li>
			<li><a href="#modal-zoomout" title="Clicking this link shows the modal">Demo ZoomOut</a></li>
			<li><a href="#modal-slidefromtop" title="Clicking this link shows the modal">Demo slideFromTop</a></li>
			<li><a href="#modal-bouncefromtop" title="Clicking this link shows the modal">Demo bounceFromTop</a></li>
			<li><a href="#modal-bouncefromtopshaky" title="Clicking this link shows the modal">Demo bounceFromTopShaky</a></li>
		</ul>

		<!-- A modal with its content -->
		<section class="modal--show" id="modal-show"
				tabindex="-1" role="dialog" aria-labelledby="label-show" aria-hidden="true">

			<div class="modal-inner">
				<header>
					<h2 id="label-show">A modal</h2>
				</header>

				<div class="modal-content">
					<p>Content.</p>
					<p><a href="#stackable">Stackable Modal</a></p>

					<p>Fap raw denim Marfa, eu lomo artisan jean shorts. Next level YOLO biodiesel PBR. Irure farm-to-table cardigan, culpa helvetica nostrud nulla messenger bag. Leggings gentrify iPhone dreamcatcher dolor. Butcher PBR est scenester McSweeney's, retro et single-origin coffee vegan irony. Dolore twee wayfarers beard yr mlkshk biodiesel, art party sint gastropub eiusmod fixie. Banksy sed DIY put a bird on it gentrify raw denim, art party vero keffiyeh cred aesthetic.</p>
				</div>

				<footer>
					<p>Footer</p>
				</footer>
			</div>

			<a href="#!" class="modal-close" title="Close this modal"
					data-dismiss="modal" data-close="Close">&times;</a>
		</section>

		<section class="modal--show" id="stackable"
				tabindex="-1" role="dialog" aria-labelledby="stackable-label" aria-hidden="true">

			<div class="modal-inner">
				<header><h2 id="stackable-label">Stacked modal</h2></header>
				<div class="modal-content"><p>Content.</p></div>
			</div>

			<a href="#!" class="modal-close" title="Close this modal"
					data-dismiss="modal" data-close="Close">&times;</a>
		</section>

		<section class="modal--fade" id="modal-fade"
				tabindex="-1" role="dialog" aria-labelledby="label-fade" aria-hidden="true">

			<div class="modal-inner">
				<header><h2 id="label-fade">A fading modal</h2></header>
				<div class="modal-content"><p>Content.</p></div>
			</div>

			<a href="#!" class="modal-close" title="Close this modal"
					data-dismiss="modal" data-close="Close">&times;</a>
		</section>

		<section class="modal--zoomin" id="modal-zoomin"
				tabindex="-1" role="dialog" aria-labelledby="label-zoomin" aria-hidden="true">

			<div class="modal-inner">
				<header><h2 id="label-zoomin">A zoomed in modal</h2></header>
				<div class="modal-content"><p>Content.</p></div>
			</div>

			<a href="#!" class="modal-close" title="Close this modal"
					data-dismiss="modal" data-close="Close">&times;</a>
		</section>

		<section class="modal--plainscreen" id="modal-plainscreen"
				tabindex="-1" role="dialog" aria-labelledby="modal-plainscreen" aria-hidden="true">

			<div class="modal-inner">
				<header><h2 id="modal-plainscreen">A plain screen modal</h2></header>
				<div class="modal-content"><p>Content.</p></div>
			</div>

			<a href="#!" class="modal-close" title="Close this modal"
					data-dismiss="modal" data-close="Close">&times;</a>
		</section>

		<section class="modal--zoomout" id="modal-zoomout"
				tabindex="-1" role="dialog" aria-labelledby="label-zoomout" aria-hidden="true">

			<div class="modal-inner">
				<header>
					<h2 id="label-zoomout">A zoomed out modal</h2>
				</header>

				<div class="modal-content">
					<p>Content.</p>
				</div>
			</div>

			<a href="#!" class="modal-close" title="Close this modal"
					data-dismiss="modal" data-close="Close">&times;</a>
		</section>

		<section class="modal--slidefromtop" id="modal-slidefromtop"
				tabindex="-1" role="dialog" aria-labelledby="label-slidefromtop" aria-hidden="true">

			<div class="modal-inner">
				<header><h2 id="label-slidefromtop">A modal that slides from the top</h2></header>
				<div class="modal-content"><p>Content.</p></div>
			</div>

			<a href="#!" class="modal-close" title="Close this modal"
					data-dismiss="modal" data-close="Close">&times;</a>
		</section>

		<section class="modal--bouncefromtop" id="modal-bouncefromtop"
				tabindex="-1" role="dialog" aria-labelledby="label-bouncefromtop" aria-hidden="true">

			<div class="modal-inner">
				<header><h2 id="label-bouncefromtop">A modal that bounces from the top</h2></header>
				<div class="modal-content"><p>Content.</p></div>
			</div>

			<a href="#!" class="modal-close" title="Close this modal"
					data-dismiss="modal" data-close="Close">&times;</a>
		</section>

		<section class="modal--bouncefromtopshaky" id="modal-bouncefromtopshaky"
				tabindex="-1" role="dialog" aria-labelledby="label-bouncefromtopshaky" aria-hidden="true">

			<div class="modal-inner">
				<header><h2 id="label-bouncefromtopshaky">A modal that bounces shakey from the top</h2></header>
				<div class="modal-content"><p>Content.</p></div>
			</div>

			<a href="#!" class="modal-close" title="Close this modal"
					data-dismiss="modal" data-close="Close">&times;</a>
		</section>


		<div class="content">
			<p>Disrupt brunch keffiyeh chillwave Williamsburg. Excepteur food truck thundercats voluptate ethical, whatever in craft beer leggings proident Vice pour-over polaroid. Terry Richardson hoodie Truffaut Wes Anderson kale chips, synth nostrud elit sint id cillum bespoke. Semiotics synth Cosby sweater brunch beard, lo-fi esse Godard Echo Park sapiente mollit wayfarers. Cillum lomo cliche, YOLO Cosby sweater fixie tumblr eu umami Schlitz assumenda culpa. Chillwave church-key plaid, labore nulla flannel kogi Tonx single-origin coffee cred ex sustainable. Mlkshk ennui polaroid post-ironic sunt, keytar semiotics sriracha fashion axe labore church-key art party.</p>

			<p>McSweeney's ex hashtag, officia beard id voluptate authentic gluten-free fingerstache 90's incididunt keytar butcher. Et meggings put a bird on it, retro yr artisan VHS chillwave ethical fixie culpa cliche wolf organic. Salvia keffiyeh fap Odd Future. Skateboard duis shabby chic put a bird on it. Stumptown flannel Williamsburg sartorial, seitan locavore Wes Anderson typewriter cliche. Elit ea nesciunt, keffiyeh cliche quis put a bird on it. Aesthetic food truck consequat, pop-up do commodo letterpress cornhole proident beard whatever Godard.</p>

			<p>Literally consequat squid, consectetur cred banjo leggings letterpress salvia incididunt semiotics Tonx. Carles et velit letterpress, kale chips quis labore delectus blue bottle irony nesciunt sed. Gastropub sartorial tote bag, non nostrud sriracha Cosby sweater typewriter pour-over lo-fi. Lomo 8-bit skateboard you probably haven't heard of them consequat freegan. Quis accusamus Marfa fanny pack single-origin coffee raw denim. Tumblr food truck ennui Tonx exercitation. Veniam flannel vegan leggings DIY.</p>
		</div>

		<script src="modal.js"></script><!-- JS for Modal -->
	</body>
</html>