Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <style> h1+a { text-decoration: none; padding: 10px 20px; background-color: #8ebf42; color: #ffffff; font-family: sans-serif; } /* Add animation (Chrome, Safari, Opera) */ @-webkit-keyframes example { from { top: -100px; opacity: 0; } to { top: 0px; opacity: 1; } } /* Add animation (Standard syntax) */ @keyframes example { from { top: -100px; opacity: 0; } to { top: 0px; opacity: 1; } } /* The modal's background */ .modal { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4); } /* Display the modal when targeted */ .modal:target { display: table; position: absolute; } /* The modal box */ .modal-dialog { display: table-cell; vertical-align: middle; } /* The modal's content */ .modal-dialog .modal-content { margin: auto; background-color: #f3f3f3; position: relative; padding: 0; outline: 0; border: 1px #777 solid; text-align: justify; width: 80%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* Add animation */ -webkit-animation-name: example; /* Chrome, Safari, Opera */ -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */ animation-name: example; animation-duration: 0.5s; } /* The button used to close the modal */ .closebtn { text-decoration: none; float: right; font-size: 35px; font-weight: bold; color: #fff; } .closebtn:hover, .closebtn:focus { color: #000; text-decoration: none; cursor: pointer; } .container { padding: 2px 16px; text-align: center; line-height: 1.6; } header { background-color: #337ab7; font-size: 25px; color: white; } header h2 { text-align: left; } footer { background-color: #337ab7; font-size: 20px; color: white; } footer p { text-align: right; } </style> </head> <body> <h1>:target selector example</h1> <a href="#modal">Open Modal</a> <div id="modal" class="modal"> <div class="modal-dialog"> <div class="modal-content"> <header class="container"> <a href="#" class="closebtn">×</a> <h2>Header</h2> </header> <div class="container"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> <footer class="container"> <p>Footer</p> </footer> </div> </div> </div> </body> </html>