Created
February 27, 2021 16:12
-
-
Save steveshead/740e7a287c1ee53a3be02f4d34bd312d to your computer and use it in GitHub Desktop.
[Javascript - simple, dismissable popup] - a simple, dismissable popup on page load example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Not my work - edited for my use --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <!-- Required meta tags --> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- Bootstrap CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> | |
| <title>Javascript Test</title> | |
| <style> | |
| @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500"); | |
| html, | |
| body { | |
| width: 100vw; | |
| height: 100vh; | |
| position: relative; | |
| } | |
| .exponea-banner { | |
| font-family: Roboto, sans-serif; | |
| position: fixed; | |
| right: 20px; | |
| bottom: 20px; | |
| background-color: #2e364d; | |
| color: #ebeef7; | |
| padding: 30px 80px 30px 35px; | |
| font-size: 16px; | |
| line-height: 1; | |
| border-radius: 5px; | |
| box-shadow: 0 3px 30px rgba(116, 119, 176, 0.3); | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| } | |
| .exponea-banner.exponea-in { | |
| opacity: 1; | |
| transition-duration: 0.4s; | |
| } | |
| .exponea-banner .exponea-close { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| padding: 5px 10px; | |
| font-size: 25px; | |
| font-weight: 300; | |
| cursor: pointer; | |
| opacity: 0.75; | |
| } | |
| .exponea-banner .exponea-label { | |
| position: absolute; | |
| bottom: 10px; | |
| right: 10px; | |
| font-size: 12px; | |
| opacity: 0.75; | |
| } | |
| .exponea-banner .exponea-text { | |
| margin-bottom: 8px; | |
| } | |
| .exponea-banner .exponea-count { | |
| font-weight: 500; | |
| } | |
| .exponea-banner .exponea-label { | |
| text-align: left; | |
| bottom: 10px; | |
| right: 10px; | |
| font-size: 12px; | |
| opacity: 0.75; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container py-5"> | |
| <div class="row"> | |
| <h3 class="text-center mb-3">Javascript - Pop UP - bottom right window</h3> | |
| <div class="col-md-6 mx-auto"> | |
| <div class="exponea-banner"> | |
| <div class="exponea-close"> | |
| × | |
| </div> | |
| <div class="exponea-text"> | |
| Hi there! Thanks for stumbling upon my website! | |
| </div> | |
| <div class="exponea-label"> | |
| - Steve Shead | |
| </div> | |
| <div class="exponea-label2 small"> | |
| Inspired by Genius - Driven by Passion | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> | |
| <script> | |
| (function() { | |
| requestAnimationFrame(function() { | |
| let banner; | |
| banner = document.querySelector('.exponea-banner'); | |
| banner.classList.add('exponea-in'); | |
| return banner.querySelector('.exponea-close').addEventListener('click', function() { | |
| return banner.classList.remove('exponea-in'); | |
| }); | |
| }); | |
| }).call(this); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment