Question

现在我有一个画布弹出窗口，但是我希望它与它所在的窗口是分开的（它被卡在第一个窗口的边界内，我只能在它内部拖动它第一个窗口）。

有没有办法做到这一点？

Answer 1

您可以使用以下代码打开新的浏览器实例：window.open(aURL,'name','width=400,height=400')

<强> 1。为弹出窗口创建一个html文件

将此代码放入popupTest.html：

    <!doctype html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style>
        window{width:300px; height:150px; }
        body{ background-color: ivory;}
        #canvas{border:1px solid red; margin:0 auto; }
    </style>
    <script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        ctx.font='14px verdana';
        ctx.fillText('I am a popup canvas.',20,50);


    }); // end $(function(){});
    </script>
    </head>
    <body>
        <canvas id="canvas" width=300 height=300></canvas>
    </body>
    </html>

<强> 2。在新的浏览器实例中打开弹出窗口（popupTest.html）

将此代码放入runPopup.html并打开它：

    <!doctype html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style>
        body{ background-color: ivory; }
        #canvas{border:1px solid red; margin:0 auto; }
    </style>
    <script>
    $(function(){

        var popupURL='popupTest.html';

        function myPopup(url){
            window.open(url,'myPopup','width=400,height=400,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,copyhistory=no,resizable=yes');
            return false;
        }

        $('#pop').on('click',function(){
            myPopup(popupURL);
            return(false);
        });


    }); // end $(function(){});
    </script>
    </head>
    <body>
        <button id=pop>Open Popup</button>
    </body>
    </html>

关于打开弹出窗口的说明

此方法要求用户触发弹出窗口（例如按钮单击或锚点击）。如果您想以编程方式触发弹出窗口，则必须确保用户已关闭任何弹出窗口阻止程序，否则您的弹出窗口将被阻止。

在当前窗口之外创建HTML画布

1 个答案: