when i tried googling this i just got downloadable browser extensions to block all adult content so kids/old people didn't stumble on it by accident which is not what i want

backstory: i am going to start a site where i regularly post short stories of my characters. however the characters are adults and sometimes i want to portray or discuss adult topics. 

for my stories with nsfw and/or potentially triggering content in them (transphobia experiences for example) i would like there to be a popup on the page verifying that the user is willing to see that kind of content.

YES I KNOW KIDS CLICK THROUGH ANYWAY but this is also for peace of mind for someone who might not want to read certain things at certain times. it's a courtesy. 

how do i create such a popup for this and what is the best way to go about it? since i'm not collecting data it doesn't need to have a place to enter a birthdate either.

thx!!!!!

If you have accessibility requirements you probably want to use a framework like Bootstrap and a modal pop-up. If you don't care too much about disabilities you can probably use CSS and a bit of Javascript to make a modal pop-up.

Hiya! I sort of made a functional code that might be able to help! Please edit to your liking should you use it! If not, well, then at least I got to do a mini project ❤

The HTML

<div id="nsfw-overlay" class="overlay-container">
    <div class="overlay-box">
        <h3>Content Warning</h3>
        <p>This story features adult themes and/or sensitive content. Are you sure you want to proceed?.</p>
        <div class="overlay-actions">
            <button onclick="hideWarning()">I'm good to read</button>
            <a href="/" class="back-link">Take me back</a>
        </div>
    </div>
</div>

The JavaScript

function hideWarning() {
    document.getElementById('nsfw-overlay').style.display = 'none';
    localStorage.setItem('nsfw_accepted', 'true');
}

window.onload = function() {
    if (localStorage.getItem('nsfw_accepted') === 'true') {
        document.getElementById('nsfw-overlay').style.display = 'none';
    }
}

The CSS

.overlay-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.overlay-box {
    background: #1e1e1e;
    color: #e0e0e0;
    padding: 24px;
    max-width: 380px;
    border-radius: 6px;
    text-align: center;
    font-family: sans-serif;
}

.overlay-box h3 {
    margin-top: 0;
    color: #e85d5d;
}

.overlay-actions {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.overlay-actions button {
    background: #2f855a;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
}

.back-link {
    background: #4a5568;
    color: white;
    padding: 10px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
}