content warning popups

two ways to warn guests about sensitive content before they see it, a native browser alert that blocks the page until dismissed, or a dedicated warning page they have to pass through first.

beginner html javascript
a way to warn visitors before they see flash content, sensitive topics, or anything else that deserves a heads up, with a choice to either continue or turn back. there are two solid ways to do this, and this tutorial covers both. option one is a native browser alert that pops up the moment the page loads and only goes away once the visitor clicks ok. option two is a separate warning page the visitor lands on first, with a "go back" link and a "continue" link to the actual content. pick whichever fits your page better, or use both for different pages!

option 1: a native browser alert

this is the simplest version, and it uses something the browser already gives you for free: alert(). it pops up that plain gray message box you've probably seen before, sitting on top of the whole browser window, and it only goes away once the visitor clicks its "ok" button. no css needed at all for this one, the browser handles the entire look of the box itself.

live example: click the button, a real browser alert will pop up.

add this <script> to your page, ideally right before the closing </body> tag:

<script>
  alert("warning! the following content may include sensitive topics.");
</script>
  • alert(): a built-in browser function that shows a message box and pauses everything else on the page, the visitor can't click, scroll, or interact with anything behind it until they dismiss it
  • the text inside the quotes is exactly what shows up inside the box, change it to whatever your warning needs to say
  • as soon as the visitor clicks "ok", the alert closes and the rest of the page becomes usable again, there's no extra function or button of your own to wire up, the browser takes care of all of it
why this works so well for a warning: unlike a custom popup made out of html and css, alert() is rendered directly by the browser itself, completely separate from your page. that means the visitor genuinely cannot interact with anything underneath it, not even by accident, until they click ok. it's the simplest way to guarantee the warning gets seen first.
heads up: the box's appearance (its gray color, its font, the wording "says" before your message, where "ok" sits) is controlled entirely by the visitor's browser, not by you, so it'll look slightly different across chrome, firefox, safari, and so on, and you can't restyle it with css. if you want full control over how the warning looks, option 2 below is the better fit. also worth knowing: like every method in this tutorial, this isn't a real security barrier, a visitor could still disable javascript to skip past it, it's a considerate heads up for people browsing normally, not a lock.

option 2: a separate warning page

this version sends the visitor to a dedicated page first, instead of layering a popup over the content itself. it's a good fit when you want the warning to feel like its own deliberate step, or when you're gating an entire section of your site rather than a single page.

the idea: any link that would normally point straight to your sensitive content instead points to a page called warning.html. that page shows your message, plus two links, "go back" and "continue":

live example: this is the exact warning pop-up i use in my own personal blog. "continue" simulates arriving at the content page, "go back" simulates returning to where you came from.

warning!

warning! the following content may include sensitive topics, including adult content and flashing images.

do you wish to continue?

<a href="warning.html">view my journal</a>

inside warning.html, lay out the message and the two choices:

<div class="warning-box">
  <p>warning! the following content may include sensitive topics, including adult content and flashing images.</p>
  <p>do you wish to continue?</p>
  <button onclick="history.go(-1)">go back</button>
  <button onclick="document.location='journal.html'">enter</button>
</div>
  • history.go(-1): sends the browser back one step in its history, exactly like clicking the browser's own back button. this is the "go back" behavior, and it works no matter which page linked to warning.html in the first place
  • document.location='journal.html': sends the browser straight to the actual content, replace journal.html with whatever page you're gating
why history.go(-1) instead of a fixed link back? a normal <a href="index.html"> link always goes to the same place, whether or not that's actually where the visitor came from. history.go(-1) instead returns them to whichever page actually linked here, which matters if more than one page on your site points to the same warning page.
naming tip: naming the file warning.html consistently means you can reuse the exact same page for more than one piece of content, just swap out the message text and the continue button's destination for each spot it's linked from, or duplicate it as warning-2.html if the wording needs to be different per section.

which one should you use?

  • use the alert (option 1) when the warning applies to one specific page, you want the fastest possible setup, and the browser's default look is fine for your theme
  • use a warning page (option 2) when you want full control over how the warning looks, when you're gating a whole section (like an entire diary or blog), when you want visitors arriving from multiple different links to all pass through the same checkpoint, or when the "go back" option matters, since a warning page can send someone back to wherever they actually came from, not just to your homepage

result

either method gives visitors a clear, deliberate choice before they see something sensitive, instead of content just appearing with no notice. the alert is quicker to set up and keeps everything on one page, while a dedicated warning page gives you full control over the look and scales better once you're gating more than a single spot on your site.