Jquery-ui dialog box 'x' button image is not visible

Question

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? enter image description here

I can see that the background gradient images are missing too. Does the folder that contains `jquery-ui.css` contains an `images` sub folder? — Salman A, May 12 '15 at 06:33

score 2 · Accepted Answer · answered May 12 '15 at 06:33

2

Try 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)
}

answered May 12 '15 at 06:33

Deenadhayalan Manoharan

5,436
14
30
50

I utilize (CSS): button.ui-dialog-titlebar-close { background-image: ~ } – draft Feb 24 '16 at 16:41

score 2 · Answer 2 · answered May 12 '15 at 06:33

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.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

The below causes issue

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/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!

Thank you - this was my issue. Unfortunately they are included upstream and I can't correct the blunder... — David H., Feb 17 '19 at 20:49

score 1 · Answer 3 · answered May 12 '15 at 06:31

1

Might be you have forget to include the sprite image

answered May 12 '15 at 06:31

stanze

2,456
10
13

score 0 · Answer 4 · answered May 12 '15 at 06:33

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.

Jquery-ui dialog box 'x' button image is not visible

4 Answers4

Linked