javascript 如何使用 jquery 和 html 将徽标或图片添加到警报框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18750762/
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 to add a logo or picture to the alert box using jquery and html
提问by LebDev
i want to add an icon in the alert box beside the text using jquery and html
我想使用 jquery 和 html 在文本旁边的警报框中添加一个图标
the alert box work fine but when i tried to add an icon i did not know how to add it can anyone help me ???
警报框工作正常，但是当我尝试添加图标时，我不知道如何添加它，任何人都可以帮助我吗？？？
in this code how to add a picture or an icon
在此代码中如何添加图片或图标
using jquery UI
使用jQuery UI
index.html
索引.html
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal message</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>
<!--<link rel="stylesheet" href="/resources/demos/style.css" />!-->
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog-message" title="Download complete">
<p>
<!--<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>!-->
<span img src = "img1.jpg" style ="float: left; margin:0 7px 50px 0; width:50px; height:50px;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
</body>
</html>
回答by David
alert() won't render images :-(
alert() 不会渲染图像:-(
If you could add more detail about what you're trying to accomplish with the alert, we can come up with a suitable alternative.
如果您可以添加有关您尝试使用警报完成的任务的更多详细信息，我们可以提出合适的替代方案。
Since you're already using jQuery, this may interest you: http://jqueryui.com/dialog/
由于您已经在使用 jQuery，因此您可能会对此感兴趣：http: //jqueryui.com/dialog/
回答by stryker
Maybe, you need to see this tutorial: http://slayeroffice.com/code/custom_alert/
也许，你需要看看这个教程：http: //slayeroffice.com/code/custom_alert/
Dialog boxescan be helpful as well: Custom alert and confirm box in jquery
对话框也很有用： jQuery 中的自定义警报和确认框
回答by wuno
you can do this with bootstrap,
你可以用引导程序来做到这一点，
download bootstrap,
下载引导程序，
add the three files to your root site folder.
将这三个文件添加到您的根站点文件夹中。
Get bootbox.js from this guys blog, He actually gives you a tutorial on this as well. The file you download will have a working example of a alert box that has been styled.
从这个家伙的博客中获取 bootbox.js，他实际上也给了你一个教程。您下载的文件将包含一个已设置样式的警告框的工作示例。
http://creativitytuts.org/twitter-bootstrap-tutorial-15-bootbox-js-alert-dialogs/
http://creativetuts.org/twitter-bootstrap-tutorial-15-bootbox-js-alert-dialogs/
then to see an actual alertbox done with bootstrap jquery you can go to this page and the very last example is exactly what your asking for...
然后要查看使用 bootstrap jquery 完成的实际警报框，您可以转到此页面，最后一个示例正是您所要求的...
http://bootboxjs.com/examples.html
http://bootboxjs.com/examples.html
This will get you your image. The only problem I am having is resizing the images. But this is probably an error on my part.
这将为您提供您的形象。我遇到的唯一问题是调整图像大小。但这可能是我的错误。
Hope this helped!
希望这有帮助！
Here is a working example of the code,
这是代码的工作示例，
HTML:
HTML：
<div class="btn1">
<button>click me</button>
</div>
<script type="text/javascript">
JS:
JS：
$(document).ready(function(){
$('.btn1').on('click', function(){
var some_html = '<img class="alert" src="img/pic1.jpg" width="30px" /><br />';
some_html += '<h2>You can use custom HTML too!</h2><br />';
some_html += '<h4>Just be sure to mind your quote marks</h4>';
bootbox.alert(some_html);
});
});
</script>
