External website / image size when displayed in modal popup menu + iframe

Question

On my site, when I click on the links, I need to display a modal pop-up window (see also this solution ), which:

• sometimes showing an external website (link # 1 below)
• sometimes only shows jpg image (link # 2 below)

Problem: when displaying:

• external site in a modal pop-up window, size is fine (see link # 1)

• jpeg image in a modal pop-up window, the size does not fit , in the sense that it does not adapt to the screen (see link # 2):

3. jpeg image in a new window, the size is in order, automatically adapted to the screen (see link No. 3).

Question: How to make a JPG image displayed in the iframe modal pop-up menu automatically adapts its size , i.e. if the jpg height is high, does it automatically change? that is, exactly the same as this happens when the image is displayed in a new window (see link # 3)

PS: do not forget to enable the loading of unsafe scripts in the browser when trying this piece of code. If not, iframes will not be displayed.

Or use this live jsfiddle demo.

 document.getElementById("link1").onclick = function(e) { e.preventDefault(); document.getElementById("popupdarkbg").style.display = "block"; document.getElementById("popup").style.display = "block"; document.getElementById('popupiframe').src = "http://example.com"; document.getElementById('popupdarkbg').onclick = function() { document.getElementById("popup").style.display = "none"; document.getElementById("popupdarkbg").style.display = "none"; }; return false; } document.getElementById("link2").onclick = function(e) { e.preventDefault(); document.getElementById("popupdarkbg").style.display = "block"; document.getElementById("popup").style.display = "block"; document.getElementById('popupiframe').src = "https://i.imgur.com/pz2iPBW.jpg"; document.getElementById('popupdarkbg').onclick = function() { document.getElementById("popup").style.display = "none"; document.getElementById("popupdarkbg").style.display = "none"; }; return false; } document.getElementById("link3").onclick = function(e) { window.open('https://i.imgur.com/pz2iPBW.jpg', 'newwindow', 'width=700,height=500'); e.preventDefault(); return false; } 

 #popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: white; z-index: 10; } #popup iframe { width: 100%; height: 100%; border: 0; } #popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; } 

 <div id="main"> <a href="" id="link1">Click me (website, modal popup)</a><br> <a href="" id="link2">Click me (jpg image, modal popup)</a><br> <a href="" id="link3">Click me (jpg image, new window)</a><br> </div> <div id="popup"><iframe id="popupiframe"></iframe></div> <div id="popupdarkbg"></div> 

Answer 1

I tried many solutions, but in the end it was easier to use both iframe and img (only one of them is used at the exact time, and the other is empty):

 <div id="popup"> <iframe id="popupiframe"></iframe> <img id="popupimg"></img> <div id="popupclose">❌</div> </div> <div id="popupdarkbg"></div> 

and check using javascript if the image url or not:

 var url = this.getAttribute('href'); if (url.toLowerCase().endsWith('.jpg') || url.toLowerCase().endsWith('.jpeg') || url.toLowerCase().endsWith('.png')) { document.getElementById('popupimg').src = url; document.getElementById('popupimg').style.display = "block"; document.getElementById('popupiframe').style.display = "none"; } else { document.getElementById('popupiframe').src = url; document.getElementById('popupimg').style.display = "none"; document.getElementById('popupiframe').style.display = "block"; } 

Note: it uses endsWith .

Answer 2

If you need to place the image in the <iframe> window, you must apply the CSS style or set the image size in JavaScript. But in this case, the images are processed from different domains, so you cannot access the contents of the <iframe> .

The best way in this case, and even if the image is not served from different sources, is to make an html page for the image and load this html page into an <iframe> .

image-preview.py

 <!DOCTYPE html> <html> <head> <style> html,body{height:100%} img{ max-width: 100%; max-height: 100%; } </style> </head> <body> <img src="https://i.imgur.com/pz2iPBW.jpg" alt=""> </body> </html> 

You can make it dynamic by using get parameters in url like, http://yourdomain.com/image-preview.py?src=https://i.imgur.com/pz2iPBW.jpg .

Answer 3

If you need to download images from other sites, you can use <img/> with width:100; height: auto; width:100; height: auto; balise.

You can save the iframe popup for websites to another event. Of course, you can determine which content (img / website) you want to display and display the corresponding popup.

Here is the fiddle

Answer 4

You say that you sometimes need to display an image, but in an iframe?

Without an iframe, here you can do it with background-image :

https://jsfiddle.net/um2799fu/8/

Answer 5

You can only use width for this

 width: 100%; 

Before using width: 100%; After using width: 100%;