How do I display image in Alert confirm box in Javascript

Question

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

User · Accepted Answer

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

This might be useful: 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>

User · Answer

Use jQuery dialog to show image  try this code   lt html gt     lt head gt       lt  head gt       lt body gt        lt div id  divid  gt            lt img gt        lt  div gt       lt body gt     lt  html gt     lt script gt     document  ready function             btn   click function             divid   dialog                     lt  script gt       first you have to include jQuery UI at your Page   Working fiddle

User · Answer

Snarky yet potentially useful answer  http   picascii com   currently down   https   www ascii-art-generator org es html  don t forget to put a  n after each line

User · Answer

I created a function that might help  All it does is imitate the alert but put an image instead of text   function alertImage imgsrc        d   css        position    absolute        top    0        left    50         -webkit-transform    translate -50   0           d   animate       opacity  0    0      d   animate       opacity  1      top   10px     250      d   append  An embedded page on this page says       d   append   lt br gt  lt img src      imgsrc      gt        b   css      position   absolute      -webkit-transform    translate -100   -100        top   100       left   100       display   inline      background-color    598cbd      border-radius   4px      color   white      border   none      width   66      height   33          lt script type  text javascript  src  https   code jquery com jquery-latest min js  gt  lt  script gt   lt div class  d  gt  lt button onclick      d   html      class  b  gt OK lt  button gt  lt  div gt     d  font-size  17px    font-family  sans-serif     b    display  none

User · Answer

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

User · Answer

You can emojis       test   on  click        gt        alert   Build is too fast

User · Answer

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

[javascript] How do I display image in Alert/confirm box in Javascript?

Examples related to javascript

Examples related to html

Examples related to css