Question

我的网站上有一个弹出式音乐播放器（www.tranceil.fm - ＆gt;右键点击耳机 - ＆gt;弹出窗口）

该窗口包含一个jQuery插件..

在那个popup.html上我向页面添加了流信息，但无论我试图做什么都会被卡在玩家后面......注意玩家及其背后的内容。

enter image description here

我尝试将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>

我想要的顶部是：“cc_recenttracks_tranceilfm”

有什么想法吗？

Answer 1

播放器的z-index为100000，因此只需使cc_recenttracks_tranceilfm元素的索引高于（100001或更高）。

也不要忘记你需要定位元素以使z-index生效（通过应用相对，绝对或固定位置）

位置元素在jQuery之上

1 个答案: