[Sir-Teabag]

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.



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.as..._css_modal


Looks like ass though

[Ganja]

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
}

z-index 'layers' elements; so elements with a high z-index will be 'above' elements with lower (or default) z-indexes.



--

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/

[Two-Ton 21]

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 {} .

[Sir-Teabag]

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
}

z-index 'layers' elements; so elements with a high z-index will be 'above' elements with lower (or default) z-indexes.



--

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/

Fuck thanks so much! The second link is absolutely perfect for what I need!