Adding an image to a pop-up message

Question

Is it possible to add an image to a pop-up message in C#/ASP.Net? I have a standard pop-up coded as such:

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "Data Entry", 
"alert('!!!!!ATTENTION !!!!! \\r\\n This is NOT the production version');", true);

I am being asked to add an image of a stop sign or a large exclamation point or something that stands out and I don't even know if it's possible.

Answer 1

I don't believe it's possible using the JavaScript alert function. However, if you use any CSS based dialog/modal box (ex, Bootstrap Modal , jQuery UI Dialog etc), it should be possible. It'd be silly to list all of the possible tools to do this, but just know they're all pretty similar to what I'm showing below in jQuery UI Dialog.

  $(function() { $( "#dialog" ).dialog({modal: true}); }); 

 <link href="https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <div id="dialog" title="Test System"> <p>This ain't the production system!</p> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Achtung.svg/2000px-Achtung.svg.png" style="height: 50px; width: 50px" /> </div> 

Answer 2

You cannot add html using javascript alert function.

A JavaScript alert is a simple window containing a message.

To implement your need, you must use a library for dialogs, popups etc.

You must use something like jQuery & jQuery UI (par example).

Here is a jsfiddle using jQuery and jQuery UI that do what you want: http://jsfiddle.net/5a833tjv/ (jQuery 1.9.1 and jQuery UI 1.9.2)

So you'll need to add the following html (par example):

<div id="dialog-message" title="Important information">
    <span class="ui-icon ui-icon-info" style="float:left; margin:0 0px 0 0;"></span>
    <div style="margin-left: 23px;">        
           !!!!!ATTENTION !!!!! \\r\\n This is NOT the production version
    </div>
</div>

And modify your startup script accordingly:

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "Data Entry", 
"
$('#dialog-message').dialog({
    modal: true,
    draggable: false,
    resizable: false,
    position: ['center', 'top'],
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        'I've read and understand this': function() {
            $(this).dialog('close');
        }
    }
});


", true);