Dave Dave - 1 month ago 6
jQuery Question

Having trouble hiding my dialog title bar while keeping its close button

I’m using JQuery 1.12. I want to create a dialog with no title bar, but keep the close button in the upper right. I have tried this for CSS

#myModal .ui-dialog-titlebar {
background-color: transparent;
border: 0px none;
}


and here’s my JS …

$(function() {
$(".searchResultsDetailRow").click(function() {
var opt;
opt = {
autoOpen: false,
modal: true,
width: 'auto',
focus: function() {
return $(this).dialog('option', 'width', $('#myModal').width() + 50);
}
};
$("#myModal").dialog(opt);
$("#myModal").dialog("open");

});
});


but still the title bar appears. How do I make it disappear? This is my Fiddle — https://jsfiddle.net/adaor26p/6/ .

MJH MJH
Answer

The reason your solution is not working is that the dialog is not wrapped in an element with an id of myModal. Try this:

div[aria-describedby="myModal"] .ui-dialog-titlebar {
  background-color: transparent;
  border: 0px none;
}
Comments