Created
August 23, 2024 12:05
-
-
Save a-mishra/e0892a44e6aac3409467d300ec9e12bf to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| // script.js | |
| document.addEventListener('DOMContentLoaded', function () { | |
| const splashDialog = document.createElement('dialog'); | |
| splashDialog.id = 'splashDialog'; | |
| // Add your splash content (logo and video) inside the dialog | |
| splashDialog.innerHTML = ` | |
| <h1>Your Logo</h1> | |
| <video autoplay muted loop> | |
| <source src="https://devguide.payu.in/website-assets/uploads/2024/08/V2_PayU_launch_film_600x300.mp4" type="video/mp4"> | |
| <!-- Add other video formats if needed --> | |
| </video> | |
| <button id="closeSplash">Close</button> | |
| `; | |
| // Apply styles directly to the dialog | |
| splashDialog.style.width = '600px'; | |
| splashDialog.style.height = '300px'; | |
| splashDialog.style.backgroundColor = '#ffffff'; | |
| splashDialog.style.display = 'flex'; | |
| splashDialog.style.flexDirection = 'column'; | |
| splashDialog.style.alignItems = 'center'; | |
| splashDialog.style.justifyContent = 'center'; | |
| splashDialog.style.position = 'fixed'; | |
| splashDialog.style.top = '50%'; | |
| splashDialog.style.left = '50%'; | |
| splashDialog.style.transform = 'translate(-50%, -50%)'; | |
| splashDialog.style.zIndex = '9999'; | |
| // Append the dialog to the body | |
| document.body.appendChild(splashDialog); | |
| // Show the dialog when the page loads | |
| splashDialog.showModal(); | |
| // Close the dialog when the button is clicked | |
| const closeButton = document.getElementById('closeSplash'); | |
| closeButton.addEventListener('click', () => { | |
| splashDialog.close(); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment