How they made controls at Github? Popup

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…


This content originally appeared on DEV Community and was authored by Kiran Mantha

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 👋


This content originally appeared on DEV Community and was authored by Kiran Mantha


Print Share Comment Cite Upload Translate Updates
APA

Kiran Mantha | Sciencx (2022-01-12T13:13:43+00:00) How they made controls at Github? Popup. Retrieved from https://www.scien.cx/2022/01/12/how-they-made-controls-at-github-popup/

MLA
" » How they made controls at Github? Popup." Kiran Mantha | Sciencx - Wednesday January 12, 2022, https://www.scien.cx/2022/01/12/how-they-made-controls-at-github-popup/
HARVARD
Kiran Mantha | Sciencx Wednesday January 12, 2022 » How they made controls at Github? Popup., viewed ,<https://www.scien.cx/2022/01/12/how-they-made-controls-at-github-popup/>
VANCOUVER
Kiran Mantha | Sciencx - » How they made controls at Github? Popup. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/12/how-they-made-controls-at-github-popup/
CHICAGO
" » How they made controls at Github? Popup." Kiran Mantha | Sciencx - Accessed . https://www.scien.cx/2022/01/12/how-they-made-controls-at-github-popup/
IEEE
" » How they made controls at Github? Popup." Kiran Mantha | Sciencx [Online]. Available: https://www.scien.cx/2022/01/12/how-they-made-controls-at-github-popup/. [Accessed: ]
rf:citation
» How they made controls at Github? Popup | Kiran Mantha | Sciencx | https://www.scien.cx/2022/01/12/how-they-made-controls-at-github-popup/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts