JQuery 模态对话框在 Chrome、IE、Safari 中的高度加倍。忽略 maxHeight

Question

这是问题的截图（在 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;
});
});

Answer 1

您同时添加了 <object> 和 <embed> 元素，因此对话框实际上包含 2 个玩家。但是第一个（<object>）坏了。启动的 JavaScript

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

正在添加<object>，jQuery 会在添加<param> 子元素之前自动关闭元素。因此追加被写入父<div>。

您可能希望使用<object> 或<embed>，具体取决于呈现页面的浏览器。我会查看 documentation for JW Player 以获取有关如何使用其中一个或另一个的详细说明。