• Episode1: Dropdown
• Episode2: Modal dialog
• Episode3: Hamburger menu
• Episode4: Popup

Recap

In last episode we gone through creation of hamburger menu with details and summary tags.

Now

This is the last episode of this series which walks through creation of popups using these wonderful tags.

Asusual let's start with same boring repeatitive html

<details aria-haspopup="true">
    <summary>
        I'm a popcorn
    </summary>
    <div>You are awesome!!</div>
</details>

ahhhh popcornnn it's movie time...😃 wait that's a stupid accordion...😬

ok ok i saw your frustation.. take a drink

you know what, we don't have to start from scratch for this. Popup is same as that of dropdown which we designed in 1st episode.

The difference is:

1. Popup can contain any type of content whereas a dropdown contain a list of options.
2. It is an in-line element unlike dropdown which is a block element.

so we can reuse dropdown styles(well we don't need most of them) which looks like:

:root {
  --primary: #fff;
  --border-color: #ccc;
  --spacing: 1rem;
}

details[aria-haspopup="true"] {
  position: relative;

  & > summary {
     list-style: none;
  }
  &[open] > summary {
     &::before {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      display: block;
      cursor: default;
      content: ' ';
      background: transparent;
    }
  }
}

There it is. The basic structure is done. Click anywhere on the page, the accordion will close. Now lets add simple styles to container div tag.

summary + div {
   position: absolute;
   margin: 4px auto;
   padding: var(--spacing);
   z-index: 2;
   background-color: var(--primary);
   border: 1px solid var(--border-color);
   border-radius: 4px;
}

Awesome!! right?? click on summary tag, it will open a small popup saying You are awesome yes i mean it. you really are!!

By applying left, right or bottom css to div tag, you can position the popup in any direction.

And that's it. There's your Popcorn.. ohh i mean Popup 😄

Thanks for your time and here is the working example.

See you again ✌️,
Kiran 👋