1

これが問題のスクリーンショットです（IEで）：

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

上記の効果（コンテンツ（JWプレーヤー）を下に押した状態でダイアログウィンドウの高さが2倍になる）は、IE8、Safari、およびChromeで発生します。IE9ではウィンドウがまったく起動しません。FFでは問題なく動作します。

ダイアログにデフォルトのパッケージ化されたCSSを使用して、UIバージョン1.8.18でJQuery1.7.1を使用しています。高さを指定せずに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

<object>と<embed>要素の両方が追加されているため、ダイアログには実際には2人のプレーヤーが含まれています。ただし、最初のもの（<object>）は壊れています。開始するJavaScript

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

はを追加し<object>、jQueryは子を追加する前に要素を自動的に閉じ<param>ます。したがって、追加は親に書き込まれ<div>ます。

おそらく、ページがレンダリングされているブラウザに応じて、どちら<object>かを使用することをお勧めします。どちらを使用するかについての詳細な説明については、JWPlayer<embed>のドキュメントを確認します。

于 2012-04-06T12:45:35.613 に答える