1

这是问题的屏幕截图（在 IE 中）：

http://img401.imageshack.us/img401/7580/screenield.jpg

上述效果——对话窗口的高度加倍，内容（JW 播放器）被推到底部——发生在 IE8、Safari 和 Chrome 中。该窗口在 IE9 中根本不启动。在 FF 中工作没有问题。

我正在使用带有 UI 版本 1.8.18 的 JQuery 1.7.1，以及对话框的默认打包 CSS。我试过不指定高度，然后指定maxHeight，都无济于事。

启动对话框的完整代码如下。它包含许多可能对问题多余的细节，但基本上是创建链接以启动具有动态内容的对话。精确的模态设置在最后。

所有帮助表示赞赏。

$(document).ready(function(){

var num = 0;

//Find [popup] instances, increment the number
$("li:contains('[popup]')").each(function() {
    var nextnumber = num++;

    //add a general and a unique class to the list item containing the hook
    $(this).addClass('popup' + ' ' + 'pop' + nextnumber);

    //Split on the hook, and save remainder of text (the path to file) as the 'path' attr
    var splitpath = $(this).text().split("[popup]");
    $(this).attr("path", splitpath[1]); 
    var path = $(this).attr("path");
    //alert($(this).attr("path"));

    //Get the previous list item (the call to action), and give it general and unique classes also.
    $thisArrow = $(this).parent().prev();
    $thisArrow.addClass('arrow' + ' ' + 'arr' + nextnumber);

    //Make the call to action an anchor link, with a general class identifier.
    $thisArrow.wrapInner('<a class="opener" title="Click to view video" path ="' + path + '"/>');

    //store path to poster as var, and hide the .popup li's
    $('li.popup').parent().hide();
});

$('.opener').click(function() {
    var Header = $(this).text();
    var popupURL = $(this).attr("path");
    var popupBG = "../contents/css/images/white-nontrans.jpg";

    var thisDialog = $('<div></div>').html('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="mediaplayer1" name="mediaplayer1" width="550" height="420">')
        .append('<param name="movie" value="../mediaplayer/player.swf">')    
        .append('<param name="autostart" value="true">')  
        .append('<param name="allowfullscreen" value="true">')
        .append('<param name="allowscriptaccess" value="always">')
        .append('<param name="bgcolor" value="#FFFFFF">')
        .append('<param name="wmode" value="opaque">') 
        .append('<param name="flashvars" value="file=' + popupURL + '&image=' + popupBG + '">') 
        .append('<embed id="mediaplayer1" name="mediaplayer2" src="../mediaplayer/player.swf" width="550" height="420" allowfullscreen="true" allowscriptaccess="always" autostart="true" bgcolor="#FFFFFF" wmode="opaque" flashvars="file=' + popupURL + '&image=' + popupBG + '" />')
        .append('</object>')

    .dialog({ autoOpen: false, title: Header, modal: true, maxHeight: 500, width:580 });
    thisDialog.dialog('open');
    return false;
});
});
4

1 回答 1

0

You have both the <object> and <embed> elements being added so the dialog actually contains 2 players. However the first one (<object>) is broken. The JavaScript that starts

var thisDialog = $('<div></div>').html(...

is adding the <object> and jQuery is automatically closing the element before adding the <param> children. Therefore the appends are being written to the parent <div>.

You probably want to use either <object> or <embed> depending on which browser the page is being rendered by. I'd check the documentation for JW Player for a detailed explanation of how to use one or the other.

于 2012-04-06T12:45:35.613 回答