Question

我正在尝试创建一个包含CSS样式的div作为弹出窗口，在5秒后自动关闭。我很感激任何帮助，因为我不知道该做什么，到目前为止我做了什么，但它不起作用。

<html>

<head>
    <style>
#divPopUp {
    border: 2px black solid;
    background-color: blue;
    width: 200px;
    height: 200px;
}
    </style>
</head>
<script>
function popUpFunc() {
    ref = setInterval(function () {
            var myWindow = window.open("", "_blank", "width=200,height=100");
            myWindow.document.write('divPopUp'.style);
        }, 10000
    }
    setTimeout(function () {
        myWindow.clearInterval(ref);
    }, 5000)
}
</script>

<body>
    <input type="button" value="popup" onclick="popUpFunc()" />
</body>

</html>

谢谢。

Answer 1

试试这段代码：弹出的每5秒钟将自动打开和关闭

<head>
    <style>
#divPopUp {
    border: 2px black solid;
    background-color: blue;
    width: 200px;
    height: 200px;
}
    </style>
</head>
<script>
function popUpFunc() {

    setInterval(function () {
       var myWindow = window.open("", "_blank", "width=200,height=100");
       myWindow.close();
    }, 5000)
}
</script>

<body>
    <input type="button" value="popup" onclick="popUpFunc()" />
</body>
</html>

Answer 2

要应用css属性，请使用内联css：每隔5秒打开新窗口显示内容然后它将自行关闭。

试试这段代码：

<html>
<head>
</head>
<script>
function popUpFunc() {

    setInterval(function () {
       var myWindow = window.open("", "_blank", "width=200,height=100");
       myWindow.document.write("<div style=' border: 2px black solid;background-color: blue;width: 200px;height: 200px;'>This is MsgWindow</div>")
        setTimeout(function(){
         myWindow.close();
        },1000)

    }, 5000)
}
</script>

<body>
    <input type="button" value="popup" onclick="popUpFunc()" />
</body>
</html>

Answer 3

请避免document.write。请改用createElement

function popUpFunc(){
    var myWindow = window.open("", "_blank", "width=200,height=100");

    /* Get <head>-Element from Popup */
    var popupHead = myWindow.document.getElementsByTagName('head')[0];

    /* Create Text-Node */
    var popupCss = document.createTextNode('#divPopUp {\
    border: 2px black solid;\
    background-color: blue;\
    width: 200px;\
    height: 200px;\
}');
    /* Create style-Element */
    var popupStyle = document.createElement('style');    
    /* Adding Text-Node to style-Element */
    popupStyle.appendChild(popupCss);
    /* Append style-element to Popup-<head> */
    popupHead.appendChild(popupStyle);

    /* Get <body>-Element from Popup */
    var popupBody = myWindow.document.getElementsByTagName('body')[0];

    /* Create div-Element */
    var div = document.createElement('div');
    div.setAttribute('id', 'divPopUp');
    /* Append DIV to body */
    popupBody.appendChild(div);

    /* Close Popup after 5 seconds*/
    setTimeout( function(){ myWindow.close() }, 5000);
};

DEMO：http://fiddle.jshell.net/Pisi2012/S5AUD/

按钮单击会生成一个div弹出，并在5秒后自动关闭

3 个答案: