Редактирование диалога Jquery CSS - PullRequest
Новая
       3

Редактирование диалога Jquery CSS

2 голосов
/ 19 апреля 2011

Я пытаюсь изменить свое диалоговое окно, чтобы иметь прозрачную строку заголовка, в которой все еще отображается альтернативный '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' не отображается (хотя по умолчанию это тоже не происходит). Есть предложения?

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

Ответы [ 2 ]

1 голос
/ 20 апреля 2011

Как пожелаешь 

background: transparent repeat-x scroll 50% 50%;
1 голос
/ 19 апреля 2011

Вот кое-что, что я сделал раньше, не удаляя заголовок изображения, а уменьшая его, чтобы он содержал только «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.
});
...