setTimeout:pop a window

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script> window.onload = function () { var oPop = document.getElementById('pop'); //set the time to pop the window setTimeout(showpop,4000); function showpop() { oPop.style.display = 'block'; } } </script>
    <style> .pop_con{ display: none; } .pop{ width: 400px; height: 300px; background-color: white; border: 1px solid black; //make the hint window align center in the window position: fixed; left: 50%; top:50%; margin-left: -200px; margin-top: -150px; //make the hint window place front of the mask window z-index: 9999; } .mask{ //make the window filled with the mask window position: fixed; width: 100%; height: 100%; background-color: black; left: 0; top: 0; opacity: 0.3; //make it compatible with IE browser filter: alpha(opacity=30); z-index: -9999; } </style>
</head>
<body>

    <h1>Home Page</h1>
    <p>page Content</p>

    <div class="pop_con" id="pop">
        <div class="pop">
            <h3>hint!</h3>
        </div>
        <div class="mask"></div>
    </div>

</body>
</html>

这里写图片描述

相关文章
相关标签/搜索