Forum Discussion

jamiemccardle's avatar
jamiemccardle
Executive
2 years ago

Pop-Up Message

disclaimer: I'm not a developer.   I'm trying to figure out how to build a pop-up message when users first come to the community because we're changing our menu and want them to all be aware.  Has...
StanGromer's avatar
StanGromer
Boss
2 years ago

For what it's worth, you can use ChatGPT to write all the code to do this for you.  I am not in any way kidding, because I did it yesterday while bored in a meeting ðŸ˜‚  I am using ChatGPT4 to be able to get the goods.

 


Help me write some code. Please do your best to ensure there is no errors, and that it works 100% I would like to have a modal that opens up automatically when the users visits the website. It should have an exit button in the top right side. It should be 400x600px in size. The modal title should be "ChatGPT made this" and the body should say "Hello my dearest Khoros Friends, ChatGPT is taking over the universe. Prepare yourselves. Learn ChatGPT". Please have the background be light blue, the text should be dark red, and please include a dinosaur emoji at the end. If it is not to much trouble, please have the border of the modal flashing as different colors. We want to grab folks attention. If the user does not exit the modal after 20 seconds, have it automatically close. Please provide the complete code I need to make this happen.

 

 

To achieve this, you can use HTML, CSS, and JavaScript. Below is the complete code. Copy and paste the following code into a new HTML file, and then open it in a web browser to see the result:

 
 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatGPT Modal</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }

  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: lightblue;
    width: 400px;
    height: 600px;
    border: 5px solid black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  .modal-header {
    padding: 10px 16px;
    background-color: lightblue;
    color: darkred;
  }

  .modal-body {
    padding: 2px 16px;
    color: darkred;
  }

  .close {
    color: darkred;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }

  .close:hover,
  .close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
  }
</style>
</head>
<body>

<div id="myModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>ChatGPT made this</h2>
    </div>
    <div class="modal-body">
      <p>Hello my dearest Khoros Friends, ChatGPT is taking over the universe. Prepare yourselves. Learn ChatGPT 🦖</p>
    </div>
  </div>
</div>

<script>
  const modal = document.getElementById('myModal');
  const closeButton = document.getElementsByClassName('close')[0];
  const modalContent = document.querySelector('.modal-content');
  let flashInterval;

  function openModal() {
    modal.style.display = 'block';
    flashBorder();
  }

  function closeModal() {
    modal.style.display = 'none';
    clearInterval(flashInterval);
  }

  closeButton.onclick = () => {
    closeModal();
  };

  window.onclick = (event) => {
    if (event.target === modal) {
      closeModal();
    }
  };

  function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

  function flashBorder() {
    flashInterval = setInterval(() => {
      modalContent.style.borderColor = getRandomColor();
    }, 500);
  }

  openModal();
  setTimeout(closeModal, 20000);
</script>

</body>
</html>

 

 

 

This code will create a modal that automatically opens when the user visits the website. The modal has an exit button in the top right corner, and its size is 400x600px. The modal title is "ChatGPT made this," and the body has the desired text, including the dinosaur emoji. The background color is light blue, the text is dark red, and the border flashes with different colors.

The modal will automatically close after 20 seconds if the user does not close it manually. The complete code provided above should be all you need to achieve this functionality.

To use this code, simply copy and paste it into a new HTML file, and then open the file in a web browser. The modal should appear as described, with the specified styles and behavior.

edit: Khoros is probably breaking the code snippet when posting, but you get the point. +Screenshot now 😄