0

私のウェブサイトにポップアップ音楽プレーヤーがあります（www.tranceil.fm->ヘッドフォンを右クリック->ポップアップ）

そのウィンドウにはjQueryプラグインが含まれています。

そのpopup.htmlで、ページにストリーム情報を追加しましたが、それを実行しようとすると、プレーヤーの背後でスタックします。プレーヤーとその背後のコンテンツに注意してください。

ここに画像の説明を入力してください

そのdivを別の場所に配置してみました..z-index：1000を試し、要素のスタイルに絶対的です..何もありません。

これは完全なポップアップページコードです。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Fullwidth Audio Player</title>

        <!-- Style sheets -->
        <link rel="stylesheet" type="text/css" href="css/jquery.fullwidthAudioPlayer.css" />
        <style type="text/css">

            /* RESET */
            html, body, div, span, applet, object, iframe, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code,
            del, dfn, em, img, ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var,
            b, u, i, center,
            dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend,
            table, caption, tbody, tfoot, thead, tr, th, td,
            article, aside, canvas, details, embed, 
            figure, figcaption, footer, header, hgroup, 
            menu, nav, output, ruby, section, summary,
            time, mark, audio, video {
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                font: inherit;
                vertical-align: baseline;
            }

            /* SET HERE YOUR BACKGROUND COLOR OF THE POPUP WINDOW */
            body {
                background-color: #141414;
            }

        </style>

        <!-- Include js files -->
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui.js" type="text/javascript"></script>
        <script src="js/soundmanager2-nodebug-jsmin.js" type="text/javascript"></script>
        <script src="js/jquery.fullwidthAudioPlayer.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript" src="http://94.23.250.14:2199/system/recenttracks.js"></script>

        <script type="text/javascript">

            //DO NOT CHANGE ANYTHING FROM THIS JAVASCRIPT CODE

            //let target window know that popout window is openend
            function notifyOpener() {
                //close popout when target window gets closed, comment the next line if you dont want that
                if(!self.opener) { self.close(); }

                if(self.opener || !self.opener.fapPopupWin) self.opener.fapPopupWin = self;

            }
            setInterval( notifyOpener, 200 );
            self.focus();

            //some soundmanager settings
            soundManager.url = 'swf/';
            soundManager.flashVersion = 9;
            soundManager.useHTML5Audio = true;

            //functions that will be called from the target window
            function initPlayer(opts, html) {
                opts.wrapperPosition = 'bottom';
                $('#fap-popup').html(html).fullwidthAudioPlayer(opts);

            }

            function addTrack(trackUrl,title,meta,cover,linkUrl) {
                $.fullwidthAudioPlayer.addTrack(trackUrl, title, meta, cover, linkUrl, true);
            }

        </script>

    </head>
    <body>
        <div id="cc_recenttracks_tranceilfm" style= "z-index:1000;" class="cc_recenttracks_list">Loading...</div>
        <!-- Fancy Music Player Container -->
        <div id="fap-popup"></div>
    </body>
</html>

私が一番上に欲しいdivは： "cc_recenttracks_tranceilfm"

何かご意見は？

4

1 に答える 1

1

プレーヤーのz-indexはです100000ので、cc_recenttracks_tranceilfm要素をそれよりも高いインデックス（つまり100001、それ以上）にします。

また、z-indexを有効にするには、要素を配置する必要があることを忘れないでください（相対位置、絶対位置、または固定位置を適用することにより）

于 2012-08-02T11:57:28.590 に答える