按鈕點擊使一個div彈出，5秒後它關閉本身

-1

我試圖創建一個包含CSS樣式的div作爲5秒後自動關閉的彈出窗口。我會很感激任何幫助，因爲我不知道該怎麼做，那我到目前爲止，但它不工作。按鈕點擊使一個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>

謝謝。

來源

2013-12-20 JaVaPG

對於應用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>

來源

2013-12-20 14:31:52 Manoj

試試這個代碼：每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>

來源

2013-12-20 13:59:22 Manoj

謝謝您的答覆。但我想上一個窗口顯示樣式#divPopUp，因爲我使用的是

，然後在5秒後關閉窗口。 – JaVaPG

添加答案另一個post.try它。 – Manoj

請避免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/

來源

2013-12-20 14:34:21 alexP

按鈕點擊使一個div彈出，5秒後它關閉本身

回答

相關問題