Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 12, 2022 01:13 pm GMT

How they made controls at Github? 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


Original Link: https://dev.to/kiranmantha/how-they-made-controls-at-github-popup-2omi

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To