How to use an image in a Javascript alert box?

Asked

Viewed 1,164 times

-2

Here I have a simple Javascript code:

window.alert("iae");

when this alert box is displayed I wish I had an image inside the alert box I’ve seen it on many websites but I don’t know how it does.

javascript alert
  • 1

    This may help you https://answall.com/a/267911/99718

  • this kind of thing is not in focus currently, where we all speak of Components, but the title of study and curiosity, you can take a look at the subject using Jquery, in this link: alerts in Jquery! although not in Hype, Jquery is still scattered everywhere. I hope it helps. hug!

2 answers

4

You can’t. Not meant for this, it was made to give a quick and simple warning. In fact almost always its use is wrong and is practically considered obsolete (it should not be used much in modern applications that are not too trivial).

The solution you use would be a layer of content that mounts the alert modal the way you want, eventually use some more modern ready component, and then you can put image or whatever you want, although it will probably be an abuse to use an image in an alert, except for an indication if that is just information, warning or error. But customizing the default browser alert is not possible.

  • @Lipespry Worse than not, friend. It is a categorical answer to the question. Not always the answer needs to respond positively to the question. If it is not possible, just answer by saying that it is not, present the arguments and, if you like, alternatives. At least that’s how I understand. :?)

  • @Lipespry I only disagree with the "virtually obsolete" part. It is a native language feature and will never be obsolete. It can be ugly, without any resources, little used, no one wants to use etc., but obsolete I believe it will never be. Unless it’s obsolete in the sense of "no one uses much". I agree. :)

  • thank you vlw!!!

  • @Sam therefore I did not say that it is obsolete, but that any modern application and beyond the extremely trivial should not use this feature. It’s in the sense that it shouldn’t be used much.

  • All right .

2

The alert() is very limited and little used today. With it it is not possible to format and much less include an image.

The best way is to use some richer Javascript component:

$( function() {
  $( "#dialog-message" ).dialog({
    modal: true,
    buttons: {
      Ok: function() {
        $( this ).dialog( "close" );
      }
    }
  });
} );
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>
  <body>
  <div id="dialog-message" title="Download complete">
    <p>
      <img src="minhaimagem.png">
      A sua mensagem a ser apresentada no box. Aqui você pode <b>formatar</b>.
    </p>
  </div>
  </body>
</html>

Source: jQuery-UI: dialog

Browser other questions tagged javascript alert

You are not signed in. Login or sign up in order to post.