如何在Javascript中的警报/确认框中显示图像？

How to display image in alert box or confirm box? I have been trying with below code but getting image url in the alert box. Please anybody help me to get solve or please give any other suggestions if it does not possible.

如何在警告框或确认框中显示图像?我一直在尝试下面的代码,但在警告框中获取图像网址。如果不可能,请任何人帮助我解决或请提出任何其他建议。

var image = document.getElementById("myImage").src="hackanm.gif";
alert("OnLoad image"+image );

5 个解决方案

#1

Alert boxes in JavaScript can only display pure text. You could use a JavaScript library like jQuery to display a modal instead?

JavaScript中的警报框只能显示纯文本。您可以使用像jQuery这样的JavaScript库来显示模态吗?

This might be useful: http://jqueryui.com/dialog/

这可能很有用:http://jqueryui.com/dialog/

You can do it like this:

你可以这样做:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
  body {
    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    font-size: 62.5%;
}

  </script>
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>Image:</p>
  <img src="http://placehold.it/50x50" alt="Placeholder Image" />

</div>


</body>
</html>

#2

Snarky yet potentially useful answer: http://picascii.com/ (don't forget to put a \n after each line!)

Snarky但可能有用的答案:http://picascii.com/(别忘了在每一行之后放一个\ n!)

#3

Short answer: You can't.

简短的回答:你做不到。

Long answer: You could use a modal to display a popup with the image you need.

答案很长:您可以使用模态显示弹出窗口,其中包含您需要的图像。

You can refer to this as an example to a modal.

您可以将此作为模态的示例。

#4

Use jQuery dialog to show image, try this code

使用jQuery对话框显示图片,试试这段代码

<html>
  <head>
    </head>
    <body>
     <div id="divid">
         <img>
     </div>
    <body>
  </html>


<script>
 $(document).ready(function(){
      $("btn").click(function(){
      $("divid").dialog();
   });
  });  
 </script>

first you have to include jQuery UI at your Page.

首先,您必须在页面中包含jQuery UI。

#5

As other have mentioned you can't display an image in an alert. The solution is to show it on the webpage.

正如其他人所提到的,您无法在警报中显示图像。解决方案是在网页上显示它。

If I have my webpage paused in the debugger and I already have an image loaded, I can display it. There is no need to use jQuery; with this native 14 lines of Javascript it will work from code or the debugger command line:

如果我在调试器中暂停了我的网页并且我已经加载了图像,我可以显示它。没有必要使用jQuery;使用这个原生的14行Javascript,它将从代码或调试器命令行工作:

function show(img){
 var _=document.getElementById('_'); 
 if(!_){_=document.createElement('canvas');document.body.appendChild(_);}
 _.id='_';
 _.style.top=0;
 _.style.left=0;
 _.width=img.width;
 _.height=img.height;
 _.style.zIndex=9999; 
 _.style.position='absolute';
 _.getContext('2d').drawImage(img,0,0);
}

Usage:

show( myimage );

#1