1

我想使用 jquery 和 html 在文本旁边的警告框中添加一个图标

警报框工作正常，但是当我尝试添加图标时，我不知道如何添加它，谁能帮助我？？？

在这段代码中如何添加图片或图标

使用 jquery 用户界面

索引.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>
4

3 回答 3

1

alert() 不会渲染图像:-(

如果您可以添加更多关于您尝试通过警报完成的内容的详细信息，我们可以提出合适的替代方案。

由于您已经在使用 jQuery，这可能会让您感兴趣：http: //jqueryui.com/dialog/

于 2013-09-11T20:41:07.010 回答
0

你可以用引导程序做到这一点，

下载引导程序，

http://getbootstrap.com/

将这三个文件添加到您的根站点文件夹。

从这个人的博客中获取 bootbox.js，他实际上也给了你一个关于这个的教程。您下载的文件将有一个已设置样式的警报框的工作示例。

http://creativitytuts.org/twitter-bootstrap-tutorial-15-bootbox-js-alert-dialogs/

然后要查看使用引导 jquery 完成的实际警报框，您可以转到此页面，最后一个示例正是您所要求的...

http://bootboxjs.com/examples.html

这会给你你的形象。我遇到的唯一问题是调整图像大小。但这可能是我的一个错误。

希望这有帮助！

这是代码的一个工作示例，

HTML：

<div class="btn1">
<button>click me</button>
</div>
 <script type="text/javascript">

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>
于 2014-03-09T00:00:02.650 回答
0

也许，你需要看看这个教程： http ://slayeroffice.com/code/custom_alert/

对话框也很有帮助： jQuery 中的自定义警报和确认框

于 2013-09-11T20:46:59.283 回答