CODEWITHSUNDEEP
javascriptjqueryhtmlpopupwindow
LebDev
LebDev

Reputation: 467

Using jQuery UI: How do I add an image to the dialog?

I am using jQuery UI and I want to add an icon within the dialog box. The dialog works fine, but I'd like to add a picture to be more attractive. I will appreciate any help.

Code:

<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 style ="float: left; margin:0 7px 50px 0; width:50px; height:37px;"><img src = "img1.jpg"></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>

Upvotes: 1

Views: 8188

Answers (2)

cssyphus
cssyphus

Reputation: 40038

All that jQueryUI's dialog() does is (1) hide the specified div upon document.ready, then (2) display it with some fancy css formatting when the .dialog('open') method (or just the dialog({ //options go here }) method) is called.

Therefore, if your div contains the image WITHOUT the jQUI dialog being instantiated, then it will contain the image AFTER the jQUI dialog method is used.

Your problem is likely the syntax error where you are missing the closing angle bracket for the <span> element, and the opening angle bracket for the <img> element. Also, the attributes that you desire for the <span> element seem to be attached to the input element.

Removing your in-line CSS (for simplicity), this will work:

<span><img src = "img1.jpg"></span>

Upvotes: 0

Barmar
Barmar

Reputation: 781088

There's nothing special about putting anything in a dialog; it's just an ordinary HTML DIV.

The problem is that you're not using correct HTML for your image. Change this line:

<span img src = "img1.jpg" style ="float: left; margin:0 7px 50px 0; width:50px; height:50px;"></span>

to:

<span style ="float: left; margin:0 7px 50px 0; width:50px; height:50px;"><img src = "img1.jpg"></span>

img is not an attribute of a <span>, it's an element of its own.

Upvotes: 1

Related Questions