Table of contents:

• 👋 About
• 👁️ Demo
• 💡 Purpose
• 📝 Inspiration
• 🛠️ How it works
• 🚀 How to install
• 🔧 Code playground
• 🎐 Need help?

---

👋 About:

Some basic CSS popups I put together by utilizing <label for="..."> and <input type="radio"> combinations together with its :checked state to mimic a <dialog> in its open/showModal() state.

Features:

• As many popups as you desire.
• Only 1 popup can be open/active at a time.
• Clicking outside the popup will close all popups.

---

👁️ Demo:

glenthemes.github.io/css-popups/demo

---

💡 Purpose:

Mostly for practice, but also to (hopefully) help out any Tumblr theme makers seeking to make no-JS pages after the JavaScript ban, and want to have popups in their design.

---

📝 Inspiration:

• Rob Dodson's article on CSS-Tricks
• Ian Hansson from CSScience (site has been down since 2014; this links to an achived version).

---

🛠️ How it works:

Expand to keep reading.

Let's look at the 2nd sentence in the demo as an example.

The phrase deux a lot is the trigger button for its popup. It's styled to look like a link, but it's actually a <label>:

The two in for="two" is an identifier we can later use on an <input> so that it knows what it's associated with. It doesn't have to be the word two, but make sure you have no spaces. If you need spaces, consider using hyphens - or underscores _ instead (e.g. i-am-groot).

The popup itself manifests as a <dialog> element:

<dialog>

  ...

</dialog>

Some notes about the <dialog> element:

• It normally requires JavaScript for it be opened. More info here.
• Without JavaScript, the <dialog> element is hidden by default and doesn't really do much, but it's still semantically important and accessible.
• Instead, I'm using combination of <label> and <input> references to toggle the visibility of the <dialog>.

Within the <dialog> element sits a descendant of <input id="two" ...>, like so:

<dialog>

  <input id="two" type="radio" name="p">
  ...

</dialog>

Let's take a closer look at the above code:

Part of the code	Details
<input> element	This is visually hidden, but it's important as it works in tandem with <label>.
id="two"	two is the same identifier we used for <label for="two"> earlier (must match).
type="radio"	Radio options are a bunch of options that can only be selected one at a time. You can have as many options as you like, but for this method of creating CSS popups, we need a close popups option as well (more on that later).
name="p"	The identifier for a group of <input type="radio"> elements (used for every radio option). Doesn't have to be p.

The next element within the <dialog> element is <div class="popup-inner">. This is where you add your popup's contents:

<dialog>

  <input id="two" type="radio" name="p">

  <div class="popup-inner">
    <p>Example contents for <b>popup #2.</b></p>
  </div>

</dialog>

While it's not required to have .popup-inner, it does help if you wish to style the box further.

Lastly, we need a radio button that closes all the popups:

<!---- CLOSE ALL POPUPS ---->
<label for="close-popups">
  <input id="close-popups" type="radio" name="p">
</label>

Let's take a closer look at the above code:

Part of the code	Details
<label>	Unlike our deux a lot trigger button, this one for the "close popups" functionality doesn't have any visible text, and the element takes up the entire screen. The popup box is placed above this "close popups" <label>, allowing you to exit the popups by clicking outside the box, whilst also preventing click actions on the box itself from activating "close popups" (e.g. highlighting text in the box won't accidentally close the popup).
for="close-popups"	The last of our radio options takes the identifier of close-popups. So when the exit action is performed, all popups close.

We have 4 popups in the demo, plus the "close popups" option. Altogether, we have 5 sets of <label> and <input type="radio" name="p"> combinations. Without any styling, it'll look something like this GIF below (plain, but the concept remains the same):

---

🚀 How to install:

Step 1: Add this stylesheet under <head> on your site (or theme code):

<link href="https://glenthemes.github.io/css-popups/core.min.css" rel="stylesheet">

Step 2: Add a trigger button in your HTML where you want it:

<label for="one">Click me</label>

Step 3: Add your popup (exact placement in HTML doesn't matter much, but ideally a direct descendant of <body>):

<!---- POPUP ---->
<dialog>
  <input id="one" type="radio" name="p">
  <div class="popup-inner">

    <!-- popup contents go here -->
    <p>Example contents for <b>popup #1.</b></p>

  </div>
</dialog>

• If you add more popups, remember to change one in <label for="one"> and <input id="one" ...> (must match).
• Each identifier (e.g. one) can only be used once (i.e. you can't have 10 popups identified by one).

Step 4: Add the exit button (the exact placement in HTML for this also doesn't matter much, but a direct descendant of <body> works well):

<!---- CLOSE ALL POPUPS ---->
<label for="close-popups">
  <input id="close-popups" type="radio" name="p">
</label>

Step 5: Add this CSS (under <style> on your site or theme code):

:root {
  --Popup-Fade-Speed:420ms;
  --Popup-Z-Index:9; /* required */
  --Popup-BG-Color:#666;
  --Popup-BG-Color-Transparency:65%;
  --Popup-BG-Blur:5px;
  --Popup-Width:450px; /* required */
  --Popup-Max-Height:85vh;
  --Popup-Padding:20px;
  --Popup-Contents-BG:#fff;
}

• Most of the above CSS options are optional, but the ones labeled with /* required */ are highly recommended.
• For the --Popup-Z-Index option, it can be any number between 0 and 2147483646.

Step 6 (optional): Customize your trigger buttons and popups:

The CSS selector for trigger buttons is label[for]:

/* example styling for trigger buttons */
label[for]{
  color:#3669dc;
  text-decoration:underline;
  cursor:pointer;
}

The CSS selector for the popup box is dialog .popup-inner:

/* example styling for popup boxes */
dialog .popup-inner {
  border-radius:12px;
  box-shadow:0px 8px 36px 0px rgba(0,0,0,20%);
}

The CSS selector for the popup's background/backdrop is label[for="close-popups"]:

/* example styling for popup background/backdrop */
label[for="close-popups"]{

}

---

🔧 Code playground:

jsfiddle.net/glenthemes/4yc5L1n0

If you'd like to study the full CSS code, the unminified version is here:
glenthemes.github.io/css-popups/core.css

---

🎐 Need help?

If you have any questions or run into any issues, you can contact me via:

💻 discord.gg/RcMKnwz
💌 glenthemes.exe@gmail.com