Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <style type="text/css">
- .container {
- visibility: hidden;
- opacity: 0;
- background-color: rgba(0, 0, 0, .5);
- position: absolute;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- display: flex;
- }
- .modal {
- margin: auto;
- z-index: 999;
- background-color: blue;
- width: 300px;
- height: 100px;
- }
- .displayed {
- opacity: 1;
- transition: opacity 0.8s;
- visibility: visible;
- }
- </style>
- <script type='text/javascript'>
- window.onload=function(){
- function showModal() {
- var modal = document.getElementById('modal');
- modal.className += " displayed";
- }
- document.getElementById('button').addEventListener('click', showModal);
- }
- </script>
- </head>
- <body>
- <div>
- content
- <button id="button">
- show modal
- </button>
- <div id="modal" class="container">
- <div class="modal">
- modal content
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement