i want to add an icon in the alert box beside the text using jquery and 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
index.html
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal message</title>
<link rel="stylesheet" href=".10.3/themes/smoothness/jquery-ui.css" />
<script src=".9.1.js"></script>
<script src=".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 plete">
<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="">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>
i want to add an icon in the alert box beside the text using jquery and 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
index.html
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal message</title>
<link rel="stylesheet" href="http://code.jquery./ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery./jquery-1.9.1.js"></script>
<script src="http://code.jquery./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 plete">
<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.">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>
- 1 You can't...you have to make a custom modal window... – Black Sheep Commented Sep 11, 2013 at 20:37
- @ aldanux what did you mean and where can i find a tutorial to create a custom modal window – LebDev Commented Sep 11, 2013 at 20:39
- Bootstrap's Modal box is very customizable and easy to use, check it out and see if it's an option: getbootstrap./2.3.2/javascript.html#modals – Jose Commented Sep 11, 2013 at 20:40
- Example this one: Modal Reveal – Black Sheep Commented Sep 11, 2013 at 20:41
3 Answers
Reset to default 1alert() won't render images :-(
If you could add more detail about what you're trying to acplish with the alert, we can e up with a suitable alternative.
Since you're already using jQuery, this may interest you: http://jqueryui./dialog/
Maybe, you need to see this tutorial: http://slayeroffice./code/custom_alert/
Dialog boxes can be helpful as well: Custom alert and confirm box in jquery
you can do this with bootstrap,
download bootstrap,
http://getbootstrap./
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.
http://creativitytuts/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...
http://bootboxjs./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:
<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>