- 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:
- Popup can contain any type of content whereas a dropdown contain a list of options.
- 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 👋
Top comments (0)