jquerycssjquery-dialog

Hide Title bar and Show Close Button in jQuery Dialog

I have hide title bar in jQuery Dialog as below

$(".ui-dialog-titlebar").hide();

This also hide close button in Dialog. But i need to show close button on Dialog.

How can i do this ?

Solution

  • Adding the following CSS will hide the title text and style, leaving the close button in place - see demo.

    .ui-dialog-title {
    display:none;
}

.ui-dialog-titlebar {
    background:transparent;
    border:none;
}

.ui-dialog .ui-dialog-titlebar-close {
    right:0;
}

    However, if you want to change the style of the close button itself (as mentioned in your other question - Arrow in Bottom of jQuery Dialog) then I suggest asking another question since showing the closeText is still a problem when using a jQuery theme - see jQuery UI Dialog - Cannot see the closeText