image - 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>

<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>

Share Improve this question asked Mar 14, 2017 at 17:51 user7704111

Can you clarify this: "Right now, when the window pops up, I only get script"? – jonmrich Commented Mar 14, 2017 at 17:56
Sure, right now the pop up window says this inside of it: 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. – user7704111 Commented Mar 14, 2017 at 18:07
I want it to have a picture inside of the pop up window instead. Make sense? – user7704111 Commented Mar 14, 2017 at 18:07
I haven't closely checked all your script - BUT --- onclick=openWindow()... there is no function in your code called openWindow – Tony Duffill Commented Mar 14, 2017 at 18:13

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

Try this:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://code.jquery./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./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>

I strongly remend 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.

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

image - How to put a picture into a pop up window in javascript? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)