logo标签列表

如何在JavaScript的警告/确认框中显示图像？

javascripthtmlcss
16

如何在提示框或确认框中显示图像？我已经尝试了下面的代码，但是在提示框中只得到图像的URL。请有人帮我解决问题，或者提供其他建议如果这不可能。

var image = document.getElementById("myImage").src="hackanm.gif";
alert("OnLoad image"+image );
7
那是不可能的，那些本地对话框只能接收文本输入。如果你想要更加花哨的对话框，请尝试使用jQueryUI。 - CBroe
1
类似问题在这里：https://dev59.com/HHPYa4cB1Zd3GeqPlqmG - gotohales
是的，感谢您先生。有没有插件可以实现这个功能？ - Mallikarjun
类似这样的东西吗？http://jsfiddle.net/crustyashish/FzsJR/1/ - user2663434
@Ashish，是的，你很棒，兄弟...这正是我想要的...非常感谢。 - Mallikarjun
8个回答
13

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>
@Mark Winterbottom，能否在模态对话框中显示图像？是否可以使用JQuery库来实现这一点？ - Mallikarjun
8
绝妙的想法。 - Seth Connell
链接目前无法访问。 - Sergio A.
@Sergio 这是一个 ASCII 艺术生成器，可以从图片中生成 ASCII 艺术。 - lilHar
值得一提的是，存在可以进行图像转ASCII码的库。将其包含在您的项目中可以让您根据需要动态更改图像。 - lilHar
4

简短回答：你不能。

详细回答：你可以使用模态框来显示所需的图片弹出窗口。

你可以参考这个作为一个模态框的示例。

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 );
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。

这里是可运行的示例代码

能否在对话框中显示 div 中的图像元素？我不确定它是否可行。您能否为此示例提供 fiddle？ - Mallikarjun
@Mallikarjun 我已经为您创建了一个fiddle，我认为这会对您有所帮助，http://jsfiddle.net/3GLCx/ - Sanjay
谢谢兄弟。还有一件事告诉我，我们能否在对话框中的图像div上获取触摸事件，而不是OK按钮？ - Mallikarjun
阅读jQuery网站上的jQuery UI文档。 - Sanjay
1

你可以使用表情符号！

$('#test').on('click', () => {
    alert(' Build is too fast');
})
无用但好奇的事实。 - Sergio A.
0

由于JS对话框只显示文本，您可以尝试使用表情符号。例如：

alert('Hello friend! \u{1F642}');

你只需要使用所需表情符号的 Unicode 十六进制值即可。 以下是可用表情符号的列表：https://unicode.org/emoji/charts/emoji-list.html

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;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接