2015-05-12 6 views
0

Я делаю простой JQuery-UI диалоговое приложение с моей JS, CSS код, как,диалоговое окно Jquery-щ «х» изображение кнопки не видно

<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> 

Когда я добавить простое диалоговое окно, то x Значок внутри кнопки закрытия диалогового окна не отображается.

У меня отсутствует включение какого-либо файла спрайта в изображение? enter image description here

+0

введите код js fiddle –

+0

У вас есть изображения? – Morpheus

+0

Лучше добавить теги сценария в . –

ответ

2

Попробуйте это ..

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) 
} 
+0

Я использую (CSS): button.ui-dialog-titlebar-close { background-image: ~} – draft

0

Это выглядит очень похоже на это было не в состоянии загрузить ресурсы изображения по некоторым причинам. Попробуйте открыть консоль вашего браузера и проверить ее на наличие ошибок.

Возможно, вы пытаетесь загрузить изображения из css/images/*, а не из того места, которое вы ожидаете.

0

Кроме того, я думаю, что у вас есть загрузочная библиотека. Некоторые версии bootstrap и jquery-ui конфликтуют с методом .button(), и если ваш bootstrap.js размещен после jquery-ui.js, загрузочный бокс .button() переопределяет вашу кнопку jquery, и изображение jquery-ui 'X' не будет отображаться.

Этот номер here может быть полезно узнать больше!

Ниже порядка работу с showup вашего close кнопки

<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> 

Ниже вызывает вопрос

<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> 

Вы также можете запустить $.fn.button.noConflict() только перед вызовом вашего диалога, и все должно работать нормально!