Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Swapnil Srivastava
13,146 PointsCreating a modal using CSS, using buttons to trigger the modal popup
Hi,
I wanted open a modal popup using the CSS only, using the class of the button I want to trigger the modal pop up.
I have thought of :target pseudo-class but it only works on only anchor elements and you need to have the id same also, where as using checkbox hack could work but I think it's used only with label elements with "for" attribute same as the checkbox id.
I can only leverage the class name to activate the modal popup, I wanted to know any workaround, which i could use in order to make it happen. i have linked the code below. if anyone could help me in this would be grateful.
codepen is linked below for the same but button is not linked to the modal http://codepen.io/swapnilsrivastava/pen/qZxQrG
4 Answers
Alexandre Poirier-Brin
11,557 Pointsuse :target like here , http://jsfiddle.net/raving/1mhsynmw/
Guil Hernandez
Treehouse TeacherHey Swapnil Srivastava,
Have you checked out our workshop on creating a modal window with CSS? That should help answer your questions. :)
Swapnil Srivastava
13,146 PointsHi Guil,
Thank you for the response. I did see that before, but it has used the checkbox hack that is famous in order to open the modal.
I wanted to you use the class in order to trigger the opening of the modal, without changing the code. the code is mentioned below .
html <button type="submit" class="btn-action">Add to bag </button>
I wanted to use the same and trigger the modal on the class = "btn-action". as :target uses anchor elements but I was not able to trigger using that or change something to trigger the :target element
Alexandre Poirier-Brin
11,557 PointsI looked it up and your best bet if you cant modify the HTML is to script it.
Swapnil Srivastava
13,146 PointsSwapnil Srivastava
13,146 PointsHey Alexandre ,
I checked the way you used it and it's apropos to use like that but in order to use the :target like you have used , anchor element should be in place of the button. I don't have that leverage to change the existing HTML code and I have to use it on the button mentioned in the code below
html code <button type="submit" class="btn-action">Add to bag </button>could you relook once again to find a better alternative , Thanks Alexandre for the code.
on the contrary , if I could use to jquery to inject a class or something to manipulate the code. in order to reflect the desired outcome.