Blur Popup
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| </head> | |
| <body> | |
| <div class="container" id="blur"> | |
| <div class="content"> | |
| <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua.</h2> | |
| <img src="img.jpg"> | |
| <a href="#" onclick="toggle()">Read More</a> | |
| </div> | |
| </div> | |
| <div id="popup"> | |
| <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua.</h2> | |
| <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> | |
| <a href="#" onclick="toggle()">Close</a> | |
| </div> | |
| </body> | |
| </html> | |
| <style type="text/css"> | |
| *{ | |
| margin: 0px; | |
| padding: 0px; | |
| box-sizing: border-box; | |
| font-family: arial; | |
| } | |
| .container{ | |
| position: relative; | |
| width: 100%; | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items:center; | |
| background: #fff173; | |
| transition: 0.5s; | |
| padding: 20px; | |
| } | |
| .container .content{ | |
| position: relative; | |
| max-width: 800px; | |
| } | |
| h2{ | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| color: #333; | |
| } | |
| .container .content img{ | |
| max-width: 100%; | |
| display: block; | |
| } | |
| a{ | |
| position: relative; | |
| padding: 5px 20px; | |
| display: inline-block; | |
| margin-top: 20px; | |
| text-decoration: none; | |
| color: #fff; | |
| background: #111; | |
| } | |
| .container#blur.active{ | |
| filter: blur(20px); | |
| pointer-events: none; | |
| user-select: none; | |
| } | |
| #popup{ | |
| position: absolute; | |
| top: 40%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| padding: 50px; | |
| width: 600px; | |
| box-shadow: 0 5px 30px rgba(0,0,0,.30); | |
| background: #fff; | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: 0.5s; | |
| } | |
| #popup.active{ | |
| top: 50%; | |
| visibility: visible; | |
| opacity: 1; | |
| transition: 0.5s; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| function toggle() { | |
| var blur = document.getElementById('blur'); | |
| blur.classList.toggle('active') | |
| var popup = document.getElementById('popup'); | |
| popup.classList.toggle('active') | |
| } | |
| </script> |
Comments
Post a Comment