tomhodgins · June 29, 2022 17:01 · tomhodgins · Dec 20, 2014 · 1001010010101 · Aug 19, 2018
diff --git a/modal-checkbox.html b/modal-checkbox.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Modal Checkbox</title>
 <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
 <style type="text/css">
  p label{color:#00f;text-decoration:underline;cursor:pointer}
  .modal,.modal *{box-sizing:border-box;-moz-box-size:border-box;transition:all .2s ease-in-out}
  .modal:checked+.modal{opacity:1;pointer-events:all}
  .modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:500;padding:15px;overflow-y:scroll;opacity:0;pointer-events:none}
  .modal article{background:#fff;width:100%;padding:50px;position:relative;z-index:700}
  .modal .close:before{content:'×';display:block;padding:20px 30px;font-size:200%;position:absolute;top:0;right:0;z-index:800;cursor:pointer}
  .modal .close:hover:before{color:#c00}
  .modal .overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:600;cursor:pointer}
 </style>
 </head>
 <body>
  <p>This is a paragraph with a <label for="modal1">link</label> to a modal window.</p>
  <input type="checkbox" class="modal" id="modal1">
  <div class="modal">
    <article>
      <p>Modal content here!</p>
    </article>
    <label for="modal1" class="close"></label>
    <label for="modal1" class="overlay"></label>
  </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Modal Checkbox</title>
	<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
	<style type="text/css">
	p label{color:#00f;text-decoration:underline;cursor:pointer}
	.modal,.modal *{box-sizing:border-box;-moz-box-size:border-box;transition:all .2s ease-in-out}
	.modal:checked+.modal{opacity:1;pointer-events:all}
	.modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:500;padding:15px;overflow-y:scroll;opacity:0;pointer-events:none}
	.modal article{background:#fff;width:100%;padding:50px;position:relative;z-index:700}
	.modal .close:before{content:'×';display:block;padding:20px 30px;font-size:200%;position:absolute;top:0;right:0;z-index:800;cursor:pointer}
	.modal .close:hover:before{color:#c00}
	.modal .overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:600;cursor:pointer}
	</style>
	</head>
	<body>
	<p>This is a paragraph with a <label for="modal1">link</label> to a modal window.</p>
	<input type="checkbox" class="modal" id="modal1">
	<div class="modal">
	<article>
	<p>Modal content here!</p>
	</article>
	<label for="modal1" class="close"></label>
	<label for="modal1" class="overlay"></label>
	</div>
	</body>
	</html>