• 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

<detailsaria-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 in1st 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 containerdiv tag.

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

Awesome!! right?? click onsummary tag, it will open a small popup sayingYou are awesome yes i mean it. you really are!!

By applyingleft,right orbottom css todiv 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 andhere is the working example.

See you again ✌️,
Kiran 👋