1

I have two DIV elements and they contain icon images as background. When I click on them I get a dialog window for each one. What I want to do when each dialog window opens, is to get the image of DIV as icon on dialog's title. Any idea? Here is my code...

HTML

<div id="opener_1"></div>
<div id="dialog_1" title="FIREFOX">This is a Firefox window...</div>
<div id="opener_2"></div>
<div id="dialog_2" title="CHROME">This is a Chrome window...</div>

JQUERY

var $JQ_ = jQuery.noConflict();

$JQ_(function () {
    $JQ_('[id^="dialog"]').dialog({
        autoOpen: false,
        width: 'auto',
        height: 'auto',
        resizable: false,
        show: {
            effect: "fade",
            duration: 250
        },
        hide: {
            effect: "fade",
            duration: 250
        }
    });
    $JQ_("#opener_1").click(function () {
        $JQ_("#dialog_1").dialog("open");
    });
    $JQ_("#opener_2").click(function () {
        $JQ_("#dialog_2").dialog("open");
    });
});

There is also a jsfiddle code here...

4

2 回答 2

0

.dialog("option", "title", newValString)在打开之前，您需要使用 , 设置标题。

解决此问题的一种方法是在对话框中添加 data-logo 值

<div id="dialog_1" title="FIREFOX" data-logo="http://theurl">

然后使用：

var $dialog = $JQ_('#dialog_1');
var strImg = '<img width="20" height="20" src="' + $dialog.data('logo') + '" />';
$dialog.dialog("option", "title", strImg);
$dialog.dialog("open");

在您的开瓶器功能中，它将在标题中设置图像。我留给你适当的风格。

于 2013-09-01T15:05:13.767 回答
0

要将图像显示为标题：

$JQ_("#opener_1").click(function () {
    var bg = $JQ_(this).css('background-image');
    bg = bg.replace('url(', '').replace(')', '');
    var image = "<img src='" + bg + "' alt='image' width='20' height='20' />";
    $JQ_("#dialog_1").dialog('option', 'title', image);
    $JQ_("#dialog_1").dialog("open");
});

工作小提琴

于 2013-09-01T15:16:05.457 回答