2

ダイアログボックスを編集して、それを閉じるための代替の「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」は表示されません（デフォルトも変更されません）。助言がありますか？

編集：このリンクは、私のコードを含むダイアログボックスを示しています。実行時に背景が透明でないことに注意してください。少し遊んでみると、画像が読み込まれていると思いますが、見えない（色が非常に似ている）ので、タイトルの色が決まれば問題もなくなると思います

4

2 に答える 2

1

これは私が以前に行ったことです。タイトル画像を削除するのではなく、「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.
});
于 2011-04-19T18:21:18.993 に答える
1

あなたの好きなように

background: transparent repeat-x scroll 50% 50%;
于 2011-04-20T08:06:54.097 に答える