Question

我正在寻找一个弹出窗口，它会在点击时出现，然后在延迟时淡出，但如果在任何给定时间再次点击，则会重新启动。我发现 this 很接近，但不确定如何将其转换为弹出窗口。

我的脚本：

<html>
<title> Smile For Me! </title>
<head>
</head>
<script>

function mypopup1() { 
var popup = document.getElementById("mypopup1");     
popup.classList.toggle("show");
} 

</script>

<style>
    .popup {  
    position: relative; 
    display: block; 
    top:20vw; 
    left:0vw; 
    cursor: pointer;   
    user-select: none;
    }
    
    span.pics {
    top: 2vw;  
    left: 3vw; 
    width:20vw; 
    height:25vw;  
    background-color: #FFF;  
    background-size:100%; 
    background-repeat:no-repeat;  
    }   
    
    .popup .pic1{  
    visibility: hidden; 
    position: absolute; 
    background-image:url(https://2.bp.blogspot.com/-XBZOVPjdFBA/UTSJuexroVI/AAAAAAAACyE/0Z6qaxPyXmY/s640/smiley-face-wallpaper-0011.jpg); 
    }
    

.popup .show {  
visibility: visible; 
}   

    
</style>
</head>
<body>

<button class="popup" onclick="mypopup1()"> Smile <span  class="pics pic1" id="mypopup1"><center></span></button>               

</body>
</html>

任何建议将不胜感激。

带有淡出延迟的弹出窗口......等等

0 个答案: