Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
60 lines (59 sloc) 1.33 KB
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Modal</title> <style> body{ padding: 10px; } #toggleMe { display: none; position: fixed; top:50%; left: 50%; transform:translateX(-50%) translateY(-50%); border: 1px solid black; padding: 20px; background-color: white; text-align: center; } #toggleControl{ display: none; } #toggleControl:checked ~ #toggleMe, #toggleControl:checked ~ .toggleOverlay { display: block; } .toggleButton{ padding: 10px; background-color: #aaffff; border-radius: 5px; cursor: pointer; } .toggleOverlay{ display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: gray; opacity: 0.8; } footer{ } </style> </head> <body> <h1>Modal Demo</h1> <label for="toggleControl" class="toggleButton">Open Modal</label> <input type="checkbox" id="toggleControl" > <label for="toggleControl" class="toggleOverlay"></label> <div id="toggleMe"> <p>Click button or outside to close dialog.</p> <label for="toggleControl" class="toggleButton">Close</label> </div> <br /><br /><br /> <footer>By <a href="https://woodloch.blog">https://woodloch.blog</a> &nbsp;<a href="https://woodloch.blog/?p=254" target="_blank">Blog Post</a></footer> </body></html>
You can’t perform that action at this time.