I should write some code in html
or javascript
or other to open a popup window by clicking on an image.
I have already seen the window.open()
method, but this isn't what I am looking for.
Precisely I want to open an image popup like Twitter does: overshadowing the background and displaying the image enlarged in the middle of the screen.
Any suggestions?
How To Create A Clickable Image In HTML? The <img> and the <a> tags together is the most common way of adding a clickable image link in HTML. In a webpage, after adding an image using the <img> tag, make it clickable by adding a <a> tag along with it.
Images can be fitted in modal popup using Bootstrap by including <img> tag in the “modal-body” div. The “modal-body” div determines the main content of modal popup. By using the <img> tag, an image can be inserted into it.
The syntax to open a popup is: window. open(url, name, params) : url. An URL to load into the new window.
Open a Modal Use any HTML element to open the modal. However, this is often a button or a link. Add the onclick attribute and point to the id of the modal (id01 in our example), using the document. getElementById() method.
You can use a lightbox to do it.
There is a simple example in this link:
http://lokeshdhakar.com/projects/lightbox2/
You can use a lightbox.
It's really simple to use. Include the script tags and CSS stylesheets in your HTML file, and then simply use:
<a class="example-image-link" href="images/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="images/thumb-1.jpg" alt="Girl looking out people on beach"></a>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With