JQuery对话框标题栏和关闭按钮不可见

Question

我遇到了jQuery-UI对话框的问题。它打开正常，但打开标题栏和关闭按钮后不可见。

标题栏和关闭按钮应如下所示：

我真的不明白为什么他们被隐藏了。关闭按钮正常运行，但它已被隐藏。

我的源代码是here

打开对话框的代码非常简单：

 $( "#dialog" ).dialog({
  autoOpen: false,
  show: {
    effect: "blind",
    duration: 1000
  },
  hide: {
    effect: "explode",
    duration: 1000
  },
  title: "This is my title"
});

$( "#opener" ).on( "click", function() {
  $( "#dialog" ).dialog( "open" );
});

源文件：

脚本：

https://s3-us-west-2.amazonaws.com/s.cdpn.io/554096/jquery-1.11.0.min.js https://s3-us-west-2.amazonaws.com/s.cdpn.io/554096/jquery-ui-1.10.4.custom.js https://s3-us-west-2.amazonaws.com/s.cdpn.io/554096/bootstrap.min.js https://s3-us-west-2.amazonaws.com/s.cdpn.io/554096/jqBootstrapValidation.js https://s3-us-west-2.amazonaws.com/s.cdpn.io/554096/json3.min.js https://s3-us-west-2.amazonaws.com/s.cdpn.io/554096/jquery.cookie.js https://s3-us-west-2.amazonaws.com/s.cdpn.io/554096/bootstrap3-typeahead.min.js https://s3-us-west-2.amazonaws.com/s.cdpn.io/554096/bootstrap-datepicker.js https://s3-us-west-2.amazonaws.com/s.cdpn.io/554096/bootstrap-datetimepicker.js https://s3-us-west-2.amazonaws.com/s.cdpn.io/554096/bootstrap-timepicker.js https://s3-us-west-2.amazonaws.com/s.cdpn.io/554096/common.js

样式：

https://s3-us-west-2.amazonaws.com/s.cdpn.io/554096/bootstrap.min.css https://s3-us-west-2.amazonaws.com/s.cdpn.io/554096/datepicker3.css https://s3-us-west-2.amazonaws.com/s.cdpn.io/554096/bootstrap-datetimepicker.css https://s3-us-west-2.amazonaws.com/s.cdpn.io/554096/bootstrap-timepicker.css https://s3-us-west-2.amazonaws.com/s.cdpn.io/554096/jquery-ui-1.10.0.custom.css https://s3-us-west-2.amazonaws.com/s.cdpn.io/554096/common.css https://s3-us-west-2.amazonaws.com/s.cdpn.io/554096/bootstrap-custom.css

Answer 1

这可以被视为快速解决方案。

.ui-dialog-titlebar{background-color:#c2c2c2;}
.ui-dialog .ui-dialog-titlebar-close
{
  background-image: url(https://cdnjs.cloudflare.com/ajax/libs/aui/6.0.1/aui/css/icons/aui-icon-close.png);
  z-index:999999;
}

但有时这可能会奏效。

Answer 2

您使用的jquery的CDN正在阻止ui-images

  

s3-us-west-2.amazonaws.com/s.cdpn.io/554096/images/ui-bg_glass_75_ffffff_1x400.png   无法加载资源：服务器响应状态为403   （禁止）

使用另一个CDN的jquery-ui css和js，例如：

https://cdnjs.com/libraries/jqueryui

Answer 3

唯一的问题是我同时使用jQuery-UI和bootstrap。 Bootstrap覆盖了一些jQuery-UI类。