16

如何在警告框或确认框中显示图像？我一直在尝试使用下面的代码，但在警报框中获取图像 url。请任何人帮助我解决问题，或者如果不可能，请提供任何其他建议。

var image = document.getElementById("myImage").src="hackanm.gif";
alert("OnLoad image"+image );
4

7 回答 7

12

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" alt="Placeholder Image" />

</div>


</body>
</html>
于 2013-10-29T13:13:59.707 回答
8

尖刻但可能有用的答案： http://picascii.com/（目前已关闭）

https://www.ascii-art-generator.org/es.html （不要忘记在每一行后面加上一个 \n ！）

于 2015-08-19T20:30:32.720 回答
4

简短的回答：你不能。

长答案：您可以使用模式来显示带有所需图像的弹出窗口。

您可以将此作为模态的示例。

于 2013-10-29T13:19:33.410 回答
1

使用 jQuery 对话框显示图像，试试这个代码

<html>
  <head>
    </head>
    <body>
     <div id="divid">
         <img>
     </div>
    <body>
  </html>


<script>
 $(document).ready(function(){
      $("btn").click(function(){
      $("divid").dialog();
   });
  });  
 </script>

`

首先，您必须在您的页面中包含 jQuery UI。

工作小提琴

于 2013-10-29T13:30:34.127 回答
1

正如其他人提到的，您无法在警报中显示图像。解决方案是在网页上显示它。

如果我的网页在调试器中暂停并且我已经加载了图像，我可以显示它。不需要使用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 );
于 2016-08-09T02:26:05.290 回答
1

你可以表情符号！

$('#test').on('click', () => {
    alert(' Build is too fast');
})
于 2020-01-28T14:25:47.443 回答
0

我创建了一个可能有帮助的函数。它所做的只是模仿警报，但放置图像而不是文本。

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;
}
于 2020-02-16T19:46:09.000 回答