需要更改jquery对话框标题栏图像

时间:2012-05-03 12:20:16

标签: jquery jquery-ui

我尝试使用下面的代码更改jQuery对话框标题栏图像,但它不起作用。

我的对话框&标题栏图像如下所示:

enter image description here

$("#dialog").dialog({
    title: '<img src="myImage.jpg" />'
});​​​​​​​​​​​

有关如何更改的任何建议?感谢

2 个答案:

答案 0 :(得分:2)

你必须添加一个CSS规则:

.ui-dialog-titlebar{
    background:url(http://www.elementalsurface.com/beech-wood.jpg);
}​

请参阅demo

答案 1 :(得分:1)

此代码将非常好地了解如何执行此操作:

jQuery:

var $Dialog_div;

function fnOpenDialog() {
    $Dialog_div = $('<div id=\'ThisDialog\'>Hello</div>').prependTo('body');

    $Dialog_div = $('#ThisDialog').dialog({
        autoOpen: true,
        draggable: true,
        resizable: true,
        title: 'Dialogimage<img src="http://dummyimage.com/100x30/000/fff&text=I\'m+an+image,+hi!" />',
        modal: true,
        stack: true,
        height: ($(window).height() * 0.95),
        width: ($(window).width() * 0.9),  
        buttons: {
            'OK': function() {
                $Dialog_div.dialog('close');
            }
        }
    });  
}

$('#ClickMe').click(fnOpenDialog);​

<强> HTML:

<!-- This is more than likely an Adobe issue where it thinks it should be in the front
     all the time no matter what however it is very annoying that you can't open
     a dialog over a PDF-->

<body>
    <div id='ClickMe'>Click here!</div>
    <br/>
    <div></div>
    <br/>      
</body>

(对话的图像与此处的示例非常相似可能是巧合:jQuery ui dialog image for the title:))

工作演示:

http://jsfiddle.net/V5NkV/http://jsfiddle.net/V5NkV/10/

单击上面演示中的click me,您将看到其中包含小图像的对话框窗口。

良好的阅读链接:

http://jqueryui.com/demos/dialog/