<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> .popupStyle{ width:260px; height:80px; background-color: rgb(85,85,85); /* display:none; */ color:#fff; text-align:center; line-height:80px; border-radius:20px; padding:8px 0; position:fixed; z-index:1; top:2%; left:50%; transform:translateX(-50%); } .popupStyle::after{ content:"after"; color:black; position:absolute; top:100%; left:50%; transform:translateX(-50%); border-width:10px; line-height:15px; border-style:solid; border-color:rgb(1, 0, 5) transparent transparent transparent; } </style>
</head>
<body style="text-align:center;">
<h2 style="margin-top:200px;">Pop Up</h2>
<div style="text-align:center;">
<a href="#" onclick="stylePopup(styleMsg)">stylePopup</a>
<a href="#" onclick="domPopup(domMsg)">domPopup</a>
</div>
<span class="popupStyle" id="popup">popupStyle</span>
<script> console.log(getComputedStyle(popup).display) const styleMsg='Popup of style'
const domMsg='Popup of dom' function stylePopup(message){ const popup=document.getElementById('popup') console.log(popup) popup.innerHTML=message || 'default messsage' popup.style.display='block' setTimeout(()=>{ popup.style.display='none' },1000) } function domPopup(message){ const span=document.createElement('span') span.innerHTML=message || 'default' span.className='popupStyle' span.style.display='block' document.body.appendChild(span) setTimeout(()=>{ span.remove() },1000) } </script>
</body>
</html>
