原生实现消息确认窗

1、html 部分

<div> <div> <input class="inputMessage" value="" type="text" placeholder="请输入提示内容" /> <span>   <button>消息提示 //     let inputMessage = document.getElementsByClassName('inputMessage')[0].value.trim(); //     if (inputMessage == '') { //         span[0].innerText = "请输入提示内容"; //         span[0].style.cssText = "color: red; font-size: 12px"; //         setTimeout(function() { //             span[0].innerText = ""; //         }, 1500); //     } //     messagePrompt(inputMessage || '世界你好！'); // }; // 绑事件的第二种方式 btn.onclick = function() { let inputMessage = document.getElementsByClassName('inputMessage')[0].value.trim(); if (inputMessage == '') { span[0].innerText = "请输入提示内容"; span[0].style.cssText = "color: red; font-size: 12px"; setTimeout(function() { span[0].innerText = ""; }, 1500); } messagePrompt(inputMessage || '世界你好！'); }; // 处理消息提示 function messagePrompt(text = "世界你好！") { let body = document.getElementsByTagName('body')[0]; let mask = document.querySelector('.mask'); let div = document.createElement('div'); div.innerHTML = `
		

			${text}
		

		

			取消确定
		
`; div.className = "message_prompt_box"; div.style.display = "block"; mask.style.display = "block"; body.appendChild(div); let title = document.getElementsByClassName('title')[0]; title.style.textAlign = "center"; if (title.offsetHeight > 20) { title.style.textAlign = "left"; } }; // 取消/确定/关闭 function offWindow(t) { let messagePromptBox = document.getElementsByClassName('message_prompt_box')[0]; let mask = document.querySelector('.mask'); messagePromptBox.remove(); mask.style.display = "none"; let textVal = null; switch (t) { case 0: textVal = "已取消"; break; case 1: textVal = "已确定"; break; default: textVal = "已关闭"; } span[span.length - 1].innerText = textVal; span[span.length - 1].style.fontSize = "16PX"; setTimeout(() => { span[span.length - 1].innerText = ""; }, 6000) }; 

3、css 部分

.message_prompt_box { position: fixed; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #EEEEEE; width: 210px; padding: 10px; box-sizing: border-box; border-radius: 6px; color: #333333; font-family: MS UI Gothic 10px; display: none; } .cancel_determine_box { display: flex; justify-content: space-around; align-items: center; padding-top: 10px; margin-top: 10px; border-top: 1px solid #FFFFFF; } .cancel,
.determine { font-size: 20px; cursor: pointer; } .cancel { color: #888888; } .determine { color: blue; } .mask { width: 100%; height: 100%; background-color: rgba(10, 10, 10, .7); position: absolute; z-index: 666; left: 0; top: 0; display: none; }