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

【问题标题】：Jquery-ui dialog box 'x' button image is not visibleJquery-ui对话框'x'按钮图像不可见
【发布时间】：2015-07-22 21:10:11
【问题描述】：

我正在用我的 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 标记不可见。

我是否缺少包含任何图像精灵文件？

【问题讨论】：

把你的代码js小提琴
你有图片吗？
最好在中添加script标签。
我可以看到背景渐变图像也丢失了。包含jquery-ui.css 的文件夹是否包含images 子文件夹？

标签： javascript jquery css jquery-ui

【解决方案1】：

或者，我认为你有引导库。某些版本的 bootstrap 和 jquery-ui 与 .button() 方法有冲突，如果您的 bootstrap.js 放在 jquery-ui.js 之后，则 bootstrap .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()，一切正常！

【讨论】：

谢谢 - 这是我的问题。不幸的是，它们包含在上游，我无法纠正错误......

【解决方案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)
}

【讨论】：

我使用 (CSS): button.ui-dialog-titlebar-close { background-image: ~ }

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

您可能忘记包含sprite image

【讨论】：