Блог

Я пытаюсь отредактировать свое диалоговое окно, чтобы оно имело прозрачную строку заголовка, в которой по-прежнему отображается альтернативный символ «X» для его закрытия, но у меня возникли проблемы вот мой диалог css на данный момент:

 /* Creates the 'X' used to close dialog */
.ui-widget-header .ui-icon 
{
    background-image: url("../Images/X.png") !important;
}  

/* Removes padding from title bar */
.ui-dialog .ui-dialog-titlebar 
{
    padding: 0;
    position: relative;
}
/* Remove title image and keep 'x' */
.ui-widget-header {
    background: transparent repeat-x scroll 50% 50% #F6A828;
    border: 1px solid #E78F08;
    color: #FFFFFF;
    font-weight: bold;
}
  

На данный момент прозрачный цвет не заменяет цвет по умолчанию (добавление !important также ничего не меняет), и ‘x’ не отображается (хотя по умолчанию этого тоже нет). Есть предложения?

РЕДАКТИРОВАТЬ: По этой ссылке показано диалоговое окно с моим кодом. Обратите внимание, что фон не является прозрачным при запуске. Поиграв с ним немного, я думаю, что изображение загружается, но я просто не могу его видеть (цвета очень похожи), поэтому я думаю, что как только будет решен цвет заголовка, эта проблема также исчезнет

Как пожелаете

 background: transparent repeat-x scroll 50% 50%;
  

Вот что я делал раньше, не удаляя изображение заголовка, но уменьшив его, чтобы оно содержало только ‘X’. и все делается в js при открытии.

     $('#dialog').dialog();
var d = $('#dialog').dialog('open');

var titleBar = d.parent().find('div.ui-dialog-titlebar');
d.parent().find('span.ui-dialog-title').text('');
titleBar.css({
    'width' : '10px',
    'height' : '10px',
    'float' : 'right',
    'top' : '-35px'//only used to move x above dialog. not needed.
});