Html 如何在 Javascript 的警报/确认框中显示图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19659173/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I display image in Alert/confirm box in Javascript?
提问by Mallikarjun
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.
如何在警告框或确认框中显示图像？我一直在尝试使用以下代码，但在警告框中获取图像 url。请任何人帮助我解决问题，如果不可能，请提供任何其他建议。
var image = document.getElementById("myImage").src="hackanm.gif";
alert("OnLoad image"+image );
采纳答案by LondonAppDev
Alert boxes in JavaScript can only display pure text. You could use a JavaScript library like jQuery to display a modal instead?
JavaScript 中的警告框只能显示纯文本。你可以使用像 jQuery 这样的 JavaScript 库来显示模态吗？
This might be useful: http://jqueryui.com/dialog/
这可能有用：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>
回答by liljoshu
Snarky yet potentially useful answer:
http://picascii.com/(currently down)
尖刻但可能有用的答案：http:
//picascii.com/（目前已关闭）
https://www.ascii-art-generator.org/es.html(don't forget to put a \n after each line!)
https://www.ascii-art-generator.org/es.html（不要忘记在每行后面放一个 \n！）
回答by Waclock
回答by Sanjay
Use jQuery dialog to show image, try this code
使用 jQuery 对话框显示图像，试试这个代码
<html>
<head>
</head>
<body>
<div id="divid">
<img>
</div>
<body>
</html>
<script>
$(document).ready(function(){
$("btn").click(function(){
$("divid").dialog();
});
});
</script>
`
`
first you have to include jQuery UI at your Page.
首先，您必须在页面中包含 jQuery UI。
回答by Michaelangel007
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:
如果我在调试器中暂停了我的网页并且我已经加载了一个图像，我可以显示它。无需使用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);
}
Usage:
用法：
show( myimage );
回答by SimonRabbit
You can emojis!
你可以表情符号！
$('#test').on('click', () => {
alert(' Build is too fast');
})
回答by Daniel
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('<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;
}
