I am doing a simple jquery-ui dialog application with my js,css code as,
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
</head>
<body>
<div id="dialog">this is a dialog box</div>
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
this jquery ui is added.....
<script>
$("#dialog").dialog()
</script>
</body>
</html>
When i add a simple dialog box, the x mark inside the dialog's close button is not visible.
Am i missing inclusion of any image sprite file?
I am doing a simple jquery-ui dialog application with my js,css code as,
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
</head>
<body>
<div id="dialog">this is a dialog box</div>
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
this jquery ui is added.....
<script>
$("#dialog").dialog()
</script>
</body>
</html>
When i add a simple dialog box, the x mark inside the dialog's close button is not visible.
Am i missing inclusion of any image sprite file?
Share Improve this question edited May 12, 2015 at 6:30 asked May 12, 2015 at 6:27 user2879704user2879704 4- put your code js fiddle – Deenadhayalan Manoharan Commented May 12, 2015 at 6:29
- Have you got images? – Morpheus Commented May 12, 2015 at 6:30
- It's better that you add the script tags in <head>. – Dhruv Ramani Commented May 12, 2015 at 6:31
-
I can see that the background gradient images are missing too. Does the folder that contains
jquery-ui.csscontains animagessub folder? – Salman Arshad Commented May 12, 2015 at 6:33
4 Answers
Reset to default 2Try this..
Include "sprite image" and if you put css file in project css folder means put image in image folder and add following changes
.ui-state-default .ui-icon {
background-image: url("images/ui-icons_888888_256x240.png");//change path of image in css(jquery-ui.css)
}
Alternatively, I think you have the bootstrap library. Some version of bootstrap and jquery-ui have conflict with the .button() method, and if your bootstrap.js is placed after jquery-ui.js, the bootstrap .button() overrides your jquery button and the jquery-ui 'X' image would then not show up.
This issue here might be helpful to know more!!
The below order works to showup your close button
<script src="//netdna.bootstrapcdn./twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis./ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
The below causes issue
<script src="//ajax.googleapis./ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn./twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
You can also run $.fn.button.noConflict() just before you call your dialog and everything should work fine!
Might be you have forget to include the sprite image
It looks very much like it wasn't able to load image resources for some reasons. Try to open your browser's network console and check it for any errors.
Perhaps it's trying to load the images from css/images/* rather than from the place that you're expecting for.