ChatGPT Popup

HTML

<body>
    <button class="button">Toggle Popup 1</button>
    <button class="button">Toggle Popup 2</button>
    <button class="button">Toggle Popup 3</button>
    <div class="popup" style="display: none;">
      <div class="popup-header">Toggle Popup 1</div>
      <div class="popup-content">
        <p>This is a centered popup that is initially hidden.</p>
        <p>This is a centered popup that is initially hidden.</p>
    </div>
    </div>
    <div class="popup" style="display: none;">
        <div class="popup-header">Toggle Popup 2</div>
        <div class="popup-content">
            <p>This is a centered popup that is initially hidden.</p>
            <p>This is a centered popup that is initially hidden.</p>
            <p>This is a centered popup that is initially hidden.</p>
        </div>
    </div>
    <div class="popup" style="display: none;">
        <div class="popup-header">Toggle Popup 3</div>
        <div class="popup-content">
            <p>This is a centered popup that is initially hidden.</p>
            <p>This is a centered popup that is initially hidden.</p>
        </div>
    </div>
      </body>

CSS

* {margin: 0;padding: 0;box-sizing: border-box;text-decoration: none;}
body {font-family:'Roboto',sans-serif;margin:0;background-color:#fff;color:#333}
.popup {display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;color:#333;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,.5);animation:fade-in .5s ease-out;overflow: hidden;}
.popup-header{position:fixed;top:0;left:0;right:0;background-color:#fff;color:333;padding:10px;z-index: 1;}
.popup-content{position:relative;padding:20px;margin-top:40px;font-size:16px;line-height:1.5}
.button {background-color:#fff;color:#333;padding:10px 20px;border-radius:5px;cursor:pointer;transition:all .25s ease-out;border:2px solid #333;box-shadow:0 0 10px rgba(0,0,0,.5)}
.button:hover {background-color:#eee}
@media (prefers-color-scheme:dark) {
 body, .popup, .button, .popup-header {background-color:#333;color:#fff}
 .popup-header {background-color:rgb(100, 49, 49);}
.button:hover {background-color:#444}
}
@keyframes fade-in {from {opacity:0}to {opacity:1}}

JavaScript

const buttons = document.querySelectorAll('.button');
const popups = document.querySelectorAll('.popup');

function togglePopup(button, popup) {
  button.addEventListener('click', function() {
    popups.forEach(p => p.style.display = 'none');
    if (popup.style.display === 'none') {
      popup.style.display = 'flex';
    } else {
      popup.style.display = 'none';
    }
  });
}
function hidePopupOnClickOutside(button, popup) {
  document.addEventListener('click', function(event) {
    if (!event.target.closest('.popup') && !event.target.closest('.button') && popup.style.display !== 'none') {
      popup.style.display = 'none';
    }
  });
}
buttons.forEach((button, i) => {
  togglePopup(button, popups[i]);
  hidePopupOnClickOutside(button, popups[i]);
});