Question

我正在尝试为Chrome创建一个扩展程序，点击按钮后会在Google Play音乐网站上显示叠加层。我可以添加一个按钮就好了，但是不能让一个div突出显示在所有内容之上，它只是被推到页面底部。

我有这些方法添加到按钮和div中，它们运行得很好。问题是div只是永远停留在页面的底部。

    injectCanvas: function( callback ) {
        var ivCanvas = $('<div />', {
            id: 'iv-canvas',
            style: 'top:0px;'
        //}).append( $('<img />', {
            //src: chrome.extension.getURL('images/icon.png')
        }).append('<span>Test</span');

        $('body').append(ivCanvas);
    },

    injectButton: function ( callback ) {
        var button = $('<button />', {
                id: 'iv-button-toggle',
                class: 'button small vertical-align'
            }).append('<span>Add Overlay Div</span>');

        button.on('click', function() {
            console.log("making visible");
            $('#iv-canvas').addClass('show');
            console.log("done making visible");
        });

        $('#headerBar .nav-bar').prepend(button);

        //callback();
    }

这是我用来尝试使div可见的CSS

$canvas-background #141517;
#iv-canvas {    
  &.show {
        opacity: .8;
        background-color: $canvas-background;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 1500;
  }
}

我是否完全以错误的方式解决这个问题？我可以在按下按钮时创建div而不是隐藏和显示它吗？

Google Play音乐Chrome扩展程序

0 个答案: