JQuery UI диалоговое окно без заголовка, но сохранить кнопку закрытия

Я хочу удалить titelbar в диалоговом окне jQuery. Но я хочу сохранить там закрытую (крестную) кнопку.

Я нашел этот вопрос:

диалоговое окно jquery UI: как инициализировать без заголовка?

В ответах там объясняется, как удалить заголовок, но если я это сделаю, он также удалит кнопку закрытия. Есть и другие ссылки, но все они делают то же самое. Они просто скрывают весь заголовок вместе с кнопкой закрытия.

Есть ли какое-либо решение, которое скрывает строку заголовка, сохраняя кнопку закрытия?

Ответы

Ответ 1

Используйте это, чтобы удалить панель титров в диалоговом окне jQuery, а не кнопку закрытия

 $(function() {
    $( "#dialog" ).dialog();
    $("#ui-dialog-title-dialog").hide();
    $(".ui-dialog-titlebar").removeClass('ui-widget-header');
 });

для новой версии jquery UI > 1.10.3

$("#dialog .ui-dialog-titlebar").css({ 
     "background-color" : "transparent", 
     "border" : "0px none" 
});

Ответ 2

Это тоже работает

$(function() {
$( "#dialog" ).dialog();
$(".ui-dialog-titlebar").removeClass('ui-widget-header');
});

Ответ 3

Вы можете удалить панель с помощью значка закрытия с помощью описанных выше техник, а затем добавить значок закрытия самостоятельно.

CSS

.CloseButton {
background: url('../icons/close-button.png');   
width:15px;
height:15px;
border: 0px solid white;
top:0;
right:0;
position:absolute;
cursor: pointer;
z-index:999;
}

HTML:

var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";

//добавьте этот div в div, содержащий ваш контент

JS:

 $(closeDiv).click(function () {
         $("yourDialogContent").dialog('close');
     });

Ответ 4

Я думаю, что самое легкое и самое надежное решение (другие здесь не работают для 1.10.3, поскольку они предполагают вещи, которые могут меняться) - это прямо установить стиль CSS для него, который вы ожидаете от него.

$("#dialog .ui-dialog-titlebar").css({ 
     "background-color" : "transparent", 
     "border" : "0px none" 
});

Ответ 5

Я попробовал другие решения здесь, которые предложили изменить атрибут background-color, и это не помогло. Решение для меня изменило атрибут background на прозрачный.

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