alert样式重置

xiaoxiao2021-02-28  32

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } #alertWrap { width: 100vw; height: 100vh; background: rgba(0,5,55,.5); position: fixed; top: 0; left: 0; display: flex; } #alert { width: 30vw; height: 30vh; background: linear-gradient(to right top, #328fb8, #554eab); margin: auto; position: relative; border-radius: 5px; } #alertCon { text-align: center; color: #fff; font-size: 2.5vw; line-height: 30vh; } #alertBtn { width: 7vw; height: 4vh; background: #00b1e5; font-size: 1.1vw; color: #fff; border: none; outline: none; cursor: pointer; position: absolute; right: 3vw; bottom: 3vh; border-radius: 3px; } </style> </head> <body> <button class="btn" οnclick="alert('456')">alert</button> <div id="alerted"></div> </body> <script> window.alert = alert; function alert(data) { textNode = data ? data : ''; var alertStr = `<div id="alertWrap"> <div id="alert"> <p id="alertCon">${textNode}</p> <button id="alertBtn">确定</button> </div> </div>`; document.getElementById("alerted").innerHTML = alertStr; var oBtn = document.getElementById("alertBtn"); oBtn.onclick = function() { console.log("123") var oAlertWrap = document.getElementById("alertWrap"); document.getElementById("alerted").removeChild(oAlertWrap); } } </script> </html>
转载请注明原文地址: https://www.6miu.com/read-1950252.html

最新回复(0)