Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- Created On 2024-05-04 -->
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <!-- External Font -->
- <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,700,900" rel="stylesheet" type="text/css">
- <link href='https://fonts.googleapis.com/css?family=Lora:400,300,100,700,900' rel='stylesheet'>
- <!-- Stylesheet Link -->
- <link rel="stylesheet" href="./theme/style.css" />
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <!-- Favicon Image Link -->
- <link rel="icon" type="image/x-png" href="./logos/js-blog-favicon.png">
- <!-- Enables Unicode Characters To Be Displayed -->
- <meta charset="UTF-8">
- <!-- Scales Website Content -->
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Popup Boxes</title>
- <style>
- .popup {
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: #fff;
- padding: 20px;
- border: 2px solid gray;
- border-radius: 16px;
- max-width: 90%;
- max-height: 90%;
- overflow: auto;
- z-index: 9999;
- }
- .popup h1, h2, h3, p {
- color: black;
- }
- .overlay {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.5);
- z-index: 9998;
- }
- .close-button {
- position: absolute;
- top: 10px;
- right: 10px;
- cursor: pointer;
- font-size: 25px;
- }
- .popup-button-img {
- cursor: pointer;
- border-radius: 16px;
- width: 300px;
- max-width: 100%;
- }
- </style>
- </head>
- <body>
- <div class="flex-container">
- <div>
- <img src="fish.jpg" onclick="openPopup('popup1')" class="popup-button-img">
- </div>
- <div>
- <img src="flower.jpg" onclick="openPopup('popup2')" class="popup-button-img">
- </div>
- </div>
- <div id="popup1" class="popup" style="display: none;">
- <span class="close-button" onclick="closePopup('popup1')">×</span>
- <h2>Popup 1</h2>
- <p>This is the content of Popup 1.</p>
- </div>
- <div id="popup2" class="popup" style="display: none;">
- <span class="close-button" onclick="closePopup('popup2')">×</span>
- <h2>Popup 2</h2>
- <p>This is the content of Popup 2.</p>
- </div>
- <div id="overlay" class="overlay" style="display: none;"></div>
- <script>
- function openPopup(popupId) {
- var popup = document.getElementById(popupId);
- var overlay = document.getElementById('overlay');
- if (popup && overlay) {
- popup.style.display = 'block';
- overlay.style.display = 'block';
- document.addEventListener('keydown', function(e) {
- if (e.key === 'Escape') {
- closePopup(popupId);
- }
- });
- }
- }
- function closePopup(popupId) {
- var popup = document.getElementById(popupId);
- var overlay = document.getElementById('overlay');
- if (popup && overlay) {
- popup.style.display = 'none';
- overlay.style.display = 'none';
- }
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement