jQuery-ui对话框的“ x”按钮图像不可见

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标记不可见。

我是否缺少任何图像精灵文件？ 在此处输入图片说明

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

可能是您忘记了包含精灵图片

Answer 3

另外，我认为您拥有引导程序库。 某些版本的bootstrap和jquery-ui与.button()方法冲突，如果将bootstrap.js放在jquery-ui.js ，则bootstrap .button()会覆盖您的jquery按钮和jquery-ui 'X' .button() jquery-ui 'X'图像将不露面。

这个问题在这里可能有助于了解更多！

以下命令可以显示您的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 个解决方案

解决方案1
2 已采纳 2015-05-12 06:33:18

解决方案2
1 2015-05-12 06:31:04

解决方案3
1 2015-05-12 06:33:34

解决方案4
0 2015-05-12 06:33:07

jQuery-ui对话框的“ x”按钮图像不可见

问题描述

4 个解决方案

解决方案1 2 已采纳 2015-05-12 06:33:18

解决方案2 1 2015-05-12 06:31:04

解决方案3 1 2015-05-12 06:33:34

解决方案4 0 2015-05-12 06:33:07

解决方案1
2 已采纳 2015-05-12 06:33:18

解决方案2
1 2015-05-12 06:31:04

解决方案3
1 2015-05-12 06:33:34

解决方案4
0 2015-05-12 06:33:07