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 anyone done this? I'd like to build it in Admin vs Studio if possible.
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">×</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 😄
Ohhh, this is where I can actually maybe help. I am not a developer. I pretend to be one sometimes.
https://codepen.io/godslildrummer/pen/jrJLqE
You really just need to copy/paste all of that code into a custom content component live on the page you want the modal to be on. It's not pretty, but you can edit the CSS to be whatever you need. If you got an idea of what you want it to look like, I can maybe help (else someone who actually is a developer probably can 10x faster and better than me 😂)
Thank You! This is great!
That's really neat and with no Javascript.
There's several ways you can do this, but do you have an example of the type of popup you're looking to recreate? Do you have an example on another site so I can see what the UX is you're expecting?
