如何在 Javascript 的警报/确认框中显示图像？
Posted
技术标签:
【中文标题】如何在 Javascript 的警报/确认框中显示图像？【英文标题】：How do I display image in Alert/confirm box in Javascript? 【发布时间】：2013-10-29 13:10:45 【问题描述】：如何在警告框或确认框中显示图像？我一直在尝试使用下面的代码，但在警报框中获取图像 url。请任何人帮助我解决问题，或者如果不可能，请提供任何其他建议。
var image = document.getElementById("myImage").src="hackanm.gif";
alert("OnLoad image"+image );
【问题讨论】：
这是不可能的，那些原生对话框只接受 text 输入。如果您想要更多花哨的对话框，请查看 jQueryUI。 类似问题***.com/questions/17268197/image-in-javascript-alert 是的，谢谢先生，有什么插件可以实现这个吗？ jsfiddle.net/crustyashish/FzsJR/1 这样的东西？？ @Ashish 是的，你的摇滚兄弟.. 正是我想要这个.. 非常感谢 【参考方案1】：JavaScript 中的警告框只能显示纯文本。您可以使用 jQuery 之类的 JavaScript 库来代替显示模式？
这可能有用： http://jqueryui.com/dialog/
你可以这样做：
<!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" />
</div>
</body>
</html>
【讨论】：
@Mark Winterbottom 是否可以在模态对话框中显示图像？有没有可能通过使用 JQuery 库来实现这一点？【参考方案2】：尖刻但可能有用的答案：
http://picascii.com/（目前关闭）
https://www.ascii-art-generator.org/es.html （别忘了在每一行后面加上一个 \n！）
【讨论】：
好主意。 链接当前已关闭。 @Sergio 这是一个从图片生成 ascii 艺术的 ascii 艺术生成器。 另外值得指出的是，存在也可以进行图像到 ascii 转换的库。在您的项目中包含一个可以让您根据需要动态更改图像。【参考方案3】：简短回答：你不能。
长答案：您可以使用 modal 来显示包含所需图像的弹出窗口。
模态框的例子可以参考this。
【讨论】：
【参考方案4】：正如其他人所提到的，您不能在警报中显示图像。解决办法是在网页上显示。
如果我的网页在调试器中暂停并且我已经加载了图像，我可以显示它。不需要使用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);
用法：
show( myimage );
【讨论】：
【参考方案5】：使用 jQuery 对话框显示图像，试试这个代码
<html>
<head>
</head>
<body>
<div id="divid">
<img>
</div>
<body>
</html>
<script>
$(document).ready(function()
$("btn").click(function()
$("divid").dialog();
);
);
</script>
`
首先你必须在你的页面中包含 jQuery UI。
Working fiddle
【讨论】：
是否可以将 div 内的图像元素显示到对话框中？我不确定它是否有效？你能给这个例子提琴吗？ @Mallikarjun 我为你创建了小提琴，我想这会对你有所帮助，jsfiddle.net/3GLCx 谢谢兄弟.. 还有一件事告诉我兄弟.. 我们可以在对话框中的那个图像 div NOT OK Button 上获得触摸事件吗？ 阅读 jQuery 网站上的 jQuery UI 文档【参考方案6】：您可以使用表情符号！
$('#test').on('click', () =>
alert('? Build is too fast');
)
【讨论】：
无用但奇怪的事实。【参考方案7】：我创建了一个可能有帮助的函数。它所做的只是模仿警报，但放置图像而不是文本。
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('<br><img src="' + imgsrc + '">')
$('.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'
)
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<div class="d"><button onclick="$('.d').html('')" class="b">OK</button></div>
.d
font-size: 17px;
font-family: sans-serif;
.b
display: none;
【讨论】：
以上是关于如何在 Javascript 的警报/确认框中显示图像？的主要内容，如果未能解决你的问题，请参考以下文章
在 IOS 9 中，javascript 警报和确认弹出窗口不适用于 Webkit
WKWebView javascript 警报、提示、确认不起作用