Click on "Choose a map"

Hi everyone, I have a normal "Choose a map" button. I wanna make it so that when clicking on it - two pictures pops out and you can then press on one of them. Right now im only use HTML and CSS. I wanna keep is a simple as possible. I dont need a tutorial, just a little guidance on where to look πŸ™‚
5 Replies
Wolle
Wolleβ€’10mo ago
If you want to keep it without JS, you can use a checkbox and use the :checked pseudo-class to show/hide your popup. A better solution, in my eyes, would be to use JS on the button to show/hide a dialog element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
Gv3-Flyver
Gv3-Flyverβ€’10mo ago
Hey @daswolle I dont mind JS, Im just not as strong in it. And is it possible to insert pictures in the dialog element?
Wolle
Wolleβ€’10mo ago
Only one way to find out ^.^
Wolle
Wolleβ€’10mo ago
(Ok, more like three) Heres Kevins video about <dialog>: https://www.youtube.com/watch?v=TAB_v6yBXIE
Kevin Powell
YouTube
dialog = the easiest way to make a popup modal
Ever needed to make a modal? Well, we have a native HTML element that does the job with the dialog element! It does a lot of things out of the box that are really awesome, so let’s see how it works! πŸ”— Links βœ… Codepen: https://codepen.io/kevinpowell/pen/KKyOYvM βœ… The polyfill: https://github.com/GoogleChrome/dialog-polyfill βœ… a11y modal: htt...
Gv3-Flyver
Gv3-Flyverβ€’10mo ago
thanks Wolle πŸ™‚ I will have a look that it πŸ™‚
Want results from more Discord servers?
Add your server
More Posts
Imposter syndromeHI guys, I have been learning frontend web development for about a year now, but I still feel like Iwrapper issue and questionHey, I'm having a little issue with my wrapper working correctly, my hero section doesn't seem to reBest way to handle many possible components to render?I just ask this on twitter, but what would be your approach to it, imagine: U have a page, that calLooking for resources that either have transparent images, or have ways to make transparent B/G'sLike the picture. I'm trying to do a similar thing for a background but have zero luck so far in finHow to pass useRef to child components from parent component in React.js?I am trying GSAP animation library, where i have nested component an I need to ref to child componenChild 'react-router-dom' <Link> not respecting parent BS padding, sibling margins. Can't figure outI have a react component, called 'dashboard.js': ``` const Dashboard = () => { return ( <div Hi, how could I do this layout with grid?Hi, how could I do this layout with grid? The edges need to be aligned, but I need only the 3rd elemHelp me fix tailwind warning about the same CSS propertiesSomebody know what is this error? ``` 'translate-x-[20%]' applies the same CSS properties as 'translHelp with svelte component in astroThis is my [page].astro- which is supposed to be index of all episodes fetched from spotify api. It OTP auto foucs (React js)Hi everyone, I would like to implment OTP verification and it has 4 inputs, and I want if the user