将图像添加到弹出消息中

本文关键字：消息 图像 添加 | 更新日期: 2023-09-27 18:10:15

是否可以在c#/ASP.Net中为弹出消息添加图像?我有一个标准的弹出窗口编码如下:

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

我被要求添加一个停止标志或一个大感叹号或其他一些突出的图像，我甚至不知道这是否可能。

将图像添加到弹出消息中

我不相信使用JavaScript警报函数是可能的。然而，如果你使用任何基于CSS的对话框/模态框(例如，Bootstrap modal, jQuery UI dialog等)，这应该是可能的。列出所有可能做到这一点的工具是愚蠢的，但只要知道它们都非常类似于我在jQuery UI对话框中展示的内容。

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

不能使用javascript的alert功能添加html。

JavaScript alert是一个包含消息的简单窗口。

为了实现你的需求，你必须为对话框、弹出窗口等使用一个库。

你必须使用jQuery &jQuery UI(示例).

这是一个jsfiddle使用jQuery和jQuery UI做你想要的:http://jsfiddle.net/5a833tjv/(jQuery 1.9.1和jQuery UI 1.9.2)

因此，您需要添加以下html(示例): 
<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>

并相应地修改启动脚本:

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);
相关文章：