+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Help with simple image overlay (/showthread.php?tid=5873183)
Help with simple image overlay - Sir-Teabag - Aug 12, 2018
I'm having trouble working this out, i'm thinking it'll use Javascript? Any help at all will be super appreciated
Anyway so on my index I have a question mark button, and I want it so when a user clicks that, instead of an image opening up or trying to download in a new tab I would like the image to be displayed with a little X button to close it, much like the HF alerts tab.
Like this, a simple overlay.
![[Image: 2018-08-13_12-24-43.png]](https://net-paste.com/uploads/2018-08-13_12-24-43.png)
This is what I'm using so far
Code
<a href="metaexample.PNG" target="_blank" title="Click me for an example"><img src="question.png" height="23px"/>Not really sure how to go about it all. Thanks if anyone can help! I hope it's not too much to ask ✌
Never mind I think I finally got it on this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
Looks like ass though
RE: Help with simple image overlay - Ganja - Aug 13, 2018
You'd use CSS:
Find the ID (id="xxx") or the class (class="xxx") of the X-div. Let's say its an ID (we use # for those, and a dot . for classes) and it's id="closemodal". Now the css (needs to be in a .css file or inside <style></style>-tags):
Code
#closemodal {
z-index: 999999
}--
Sorry, misread your question. You're looking for a modal. I like remodal http://vodkabears.github.io/remodal/ , but if you want a shinier one you can use https://sweetalert2.github.io/
RE: Help with simple image overlay - Two-Ton 21 - Aug 13, 2018
Create a wrapper element (position relative). The first child element is your content. Under the content you place your overlay (position absolute, width/height = 100%). To trigger display you could use JS or advanced CSS selectors, e.g. #wrapper:hover + #popup {} .
RE: Help with simple image overlay - Sir-Teabag - Aug 13, 2018
(Aug 13, 2018 10:13 AM)El Pusstolero Wrote: You'd use CSS:Fuck thanks so much! The second link is absolutely perfect for what I need!
Find the ID (id="xxx") or the class (class="xxx") of the X-div. Let's say its an ID (we use # for those, and a dot . for classes) and it's id="closemodal". Now the css (needs to be in a .css file or inside <style></style>-tags):
z-index 'layers' elements; so elements with a high z-index will be 'above' elements with lower (or default) z-indexes.Code#closemodal {
z-index: 999999
}
--
Sorry, misread your question. You're looking for a modal. I like remodal http://vodkabears.github.io/remodal/ , but if you want a shinier one you can use https://sweetalert2.github.io/