当前位置：网站首页>JS模态框

JS模态框

2022-07-17 03:49:00 【郭郭郭憨憨】

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/model.css">
	</head>
	<body>
		<!-- css样式引用的，js是自己写的 -->
		<div id="model" style="display: none;">
			<div class="modelDialog">
				<span class="close" style="display: none;">x</span>
				<div class="title">
					退出游戏
				</div>
				<div class="content">
					<div class="subject">确认退出游戏?</div> 
					<div class="options">
						<div class="btn confirm">确认</div>
						<div class="btn cancel">取消</div>
					</div>
				</div>
			</div>
		</div>
		<button>68元购买胡桃！！</button><button>168元购买胡桃的皮肤！！</button><button>退出游戏</button>
		<script>
			var model=document.querySelector("#model");
			var btns=document.querySelectorAll("button");
			var buts=document.querySelectorAll(".btn");
			function changeText(title,subject,confirm,cancel,close){
				var titleEle=document.querySelector(".title");
				titleEle.innerText=title;//更换标题
				var subjectEle=document.querySelector(".subject");
				subjectEle.innerText=subject;//更换内容
				var confirmEle=document.querySelector(".confirm");
				confirmEle.innerText=confirm;
				var cancelEle=document.querySelector(".cancel");
				cancelEle.innerText=cancel;
				closeEle=document.querySelector(".close");
				if(close){
					closeEle.style.display="inline-block";//根据需求选择是否想要X
				}else{
					closeEle.style.display="none";//根据需求选择是否想要X
				}
			}
			btns[0].onclick=function(){
				model.style.display="flex";
				changeText("购买英雄","确认购买胡桃吗？","确认购买","我再想想吧",true);
				closeEle.onclick=function(){
					model.style.display="none";
				}
				buts[0].onclick=function(){
					changeText("购买成功","恭喜你，已经拥有胡桃","查看角色","返回",false);
					buts[0].onclick=function(){
						model.style.display="none";
					}
					buts[1].onclick=function(){
						model.style.display="none";
					}
				}
				buts[1].onclick=function(){
					model.style.display="none";
				}
			}
			btns[1].onclick=function(){
				model.style.display="flex";
				changeText("购买皮肤？","确认购买胡桃的皮肤吗？","确认购买","我再想想吧",true);
				closeEle.onclick=function(){
					model.style.display="none";
				}
				buts[0].onclick=function(){
					changeText("购买成功","恭喜你，已经拥有胡桃的皮肤","查看皮肤","返回",false);
					buts[0].onclick=function(){
						model.style.display="none";
					}
					buts[1].onclick=function(){
						model.style.display="none";
					}
				}
				buts[1].onclick=function(){
					model.style.display="none";
				}
			}
			btns[2].onclick=function(){
				model.style.display="flex";
				changeText("退出游戏","确认退出游戏吗？","确认退出","返回",false);
				buts[0].onclick=function(){
					model.style.display="none";
				}
				buts[1].onclick=function(){
					model.style.display="none";
				}
			}
		</script>
	</body>
</html>