JQuery Modal Dialog doubles height in Chrome, IE, Safari. Ignores maxHeight

问题

Here is a screenshot of the problem (in IE):

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

The above effect - the doubling in height of the dialogue window, with the content (a JW Player) pushed to the bottom - happens in IE8, Safari and Chrome. The window does not launch at all in IE9. Works no problem in FF.

I am using JQuery 1.7.1 with UI version 1.8.18, with the default packaged CSS for the dialog. I have tried not specifying the height, and then specifying a maxHeight, both to no avail.

The full code that launches the dialog is below. It contains a lot of details perhaps superfluous to the question, but is basically creating links to launch dialogues with dynamic content. The precise modal settings are at the end.

All help appreciated.

$(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;
});
});

回答1:

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.

来源：https://stackoverflow.com/questions/10043240/jquery-modal-dialog-doubles-height-in-chrome-ie-safari-ignores-maxheight