JQuery dialog title bar and close button not visible

Question

I have a problem with jQuery-UI dialog. It openes normally, but after opening title bar and close button are not visible.

Title bar and close button should look like this:

I really don't understand why they are hidden. Close button is functioning normally, although it's hidden.

My source code is here

Code for opening dialog is quite simple:

 $( "#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" );
});

Source files:

Scripts:

Styles:

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

Can you post the full source code? So we can see it all and test it ourselves to see what is going wrong. Or you can just inspect element it to see styles on the right side — Deckerz
This is all that I have. Source files are visible under 'JS' and 'CSS'. Or have you meant something else? — FrenkyB
I've added source files (scripts and styles) to my question. — FrenkyB

Rohit Kumar Rohit Kumar · Accepted Answer · 2017-05-17T08:48:19

This can be considered as quick fix.

.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;
}

But at times this might work.

JQuery dialog title bar and close button not visible

3 Answers