CODEWITHSUNDEEP
javascriptimagehrefpopupwindow
user7704111
user7704111

Reputation:

How to put a picture into a pop up window in javascript?

I have this script, however, I cannot figure out how to get an image to show up in the pop up window. Right now, when the window pops up, I only get script. I have tried to enter a link using the href code and the 

<html>
<head> 
 <SCRIPT language="JavaScript"> 

var w = 480, h = 340;

if (document.getElementById) {
   w = screen.availWidth;
   h = screen.availHeight;
}  

var popW = 300, popH = 200;

var leftPos = (w-popW)/2;
var topPos = (h-popH)/2;



msgWindow = window.open('','popup','width=' + popW + ',height=' + popH + 
                         ',top=' + topPos + ',left=' + leftPos + ',       scrollbars=yes');

msgWindow.document.write 
    ('<HTML><HEAD><TITLE>Centered Window</TITLE></HEAD><BODY><FORM    NAME="form1">' +
    ' <H1>Notice the centered popup window.</H1>This is the ordinary HTML' + 
    ' document that can be created on the fly.  But the window is centered   in ' +
    ' the browser.  Click the button below to close the window.<br />' +
    '<INPUT TYPE="button" VALUE="OK"onClick="window.close();"></FORM></BODY>   </HTML>');


</script>
<form>
<input type="button" onClick="openWindow()" value="Click Me">
</form>

Upvotes: 1

Views: 14654

Answers (3)

Khaled Mashaly
Khaled Mashaly

Reputation: 1195

I strongly recommend against using document.write();, use document.body.innerHTML instead.

precisely use:

msgWindow.document.body.innerHTML = '<img src="url/to/your/image.jpg"></img>';

instead of:

msgWindow.document.write('<HTML><HEAD><TITLE>Centered Window</TITLE></HEAD><BODY><FORM NAME="form1">' +
  ' <H1>Notice the centered popup window.</H1>This is the ordinary HTML' +
  ' document that can be created on the fly.  But the window is centered   in ' +
  ' the browser.  Click the button below to close the window.<br />' +
  '<INPUT TYPE="button" VALUE="OK"onClick="window.close();"></FORM></BODY>   </HTML>');

Here's a working example using an image.

Upvotes: 2

volkinc
volkinc

Reputation: 2128

Try this:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>

<html>
<head> 
 <SCRIPT language="JavaScript"> 

var w = 480, h = 340;


function openWindow(){
if (document.getElementById) {
   w = screen.availWidth;
   h = screen.availHeight;
}  

var popW = 800, popH = 700;

var leftPos = (w-popW)/2;
var topPos = (h-popH)/2;



msgWindow = window.open('','popup','width=' + popW + ',height=' + popH + 
                         ',top=' + topPos + ',left=' + leftPos + ',       scrollbars=yes');

msgWindow.document.write 
    ('<HTML><HEAD><TITLE>Centered Window</TITLE></HEAD><BODY><FORM    NAME="form1">' +
    '<img src="https://static5.cargurus.com/images/site/2009/10/24/14/42/2004_suzuki_vitara_4_dr_lx_4wd_suv-pic-8731393806365188898-640x480.jpeg">'+
    ' <H1>Notice the centered popup window.</H1>This is the ordinary HTML' + 
    ' document that can be created on the fly.  But the window is centered   in ' +
    ' the browser.  Click the button below to close the window.<br />' +
    '<INPUT TYPE="button" VALUE="OK"onClick="window.close();"></FORM></BODY>   </HTML>');
}

</script>
<form>
<input type="button" onClick="openWindow()" value="Click Me">
</form>


</body>
</html>

Upvotes: 2

jonmrich
jonmrich

Reputation: 4333

To just show an image, then replace this part as shown:

msgWindow.document.write ('<img src="//i.imgur.com/j2JTnI2.png" >');

Upvotes: 0

Related Questions