Question

我正在用js，css代码做一个简单的jquery-ui对话框应用程序，

<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

Answer 1

试试这个..

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

Answer 2

您可能忘记包含sprite image

Answer 3

或者，我认为你有自举库。某些版本的bootstrap和jquery-ui与.button()方法存在冲突，如果bootstrap.js位于jquery-ui.js之后，则引导程序.button()会覆盖您的jquery按钮和jquery-ui 'X'图像将不会显示。

此问题 here 可能有助于了解更多内容!!

以下订单可用于显示您的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()，一切正常！

Answer 4

由于某些原因，它看起来非常像无法加载图像资源。尝试打开浏览器的网络控制台并检查是否有任何错误。

也许它正在尝试从css / images / *而不是从您期望的地方加载图像。

Jquery-ui对话框'x'按钮图像不可见

4 个答案: