web前端之实现原生消息确认弹窗、模态框、页面交互、switch、remove、createElement、querySelector

---

1、html部分

<div>
	<div>
		<input class="inputMessage" value="" type="text" placeholder="请输入提示内容" />
		<span>span>
	div>

	
	

	
	<button>消息提示button>
	<span>span>
div>

<div class="mask" onclick="offWindow(2)">div>

---

2、JavaScript部分

let span = document.getElementsByTagName('span');

// 绑事件的第二种方式
let btn = document.getElementsByTagName("button")[0];

// 绑事件的第一种方式
// function btnMR() {
//     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;
}