在程序運(yùn)行中的報(bào)錯(cuò)我們都會(huì)收到相關(guān)錯(cuò)誤彈窗的警告，那么今天小編就和大家分享個(gè)“簡(jiǎn)單前端彈窗小案例分享！ ”相關(guān)內(nèi)容分享！
我們通過(guò)運(yùn)用 html 及原生 js 寫(xiě)個(gè)彈窗，供參考。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
margin: 0px;
}
.zhezhao{
position: fixed;
left: 0px;
top: 0px;
background: #000;
width: 100%;
height: 100%;
opacity: 0.5;
}
.tankuang{
position: relative;
background: #fff;
width: 50%;
height: 80%;
border-radius: 5px;
margin: 5% auto;
}
#header{
height: 40px;
}
#header-right{
position: absolute;
width: 25px;
height: 25px;
border-radius: 5px;
background: red;
color: #fff;
right: 5px;
top: 5px;
text-align: center;
}
</style>
</head>
<body>
<button type="button" onclick="dianwo()">點(diǎn)我</button>
<div class="zhezhao" id='zhezhao'>
<div class="tankuang">
<div id="header">
<span>我是彈窗</span>
<div id="header-right" onclick="hidder()">x</div>
</div>
</div>
</div>
<script type="text/javascript">
document.getElementById('zhezhao').style.display="none";
function dianwo(){
document.getElementById('zhezhao').style.display="";
}
function hidder(){
document.getElementById('zhezhao').style.display="none";
}
</script>
</body>
</html>以上就是小編自己編寫(xiě)的有關(guān)于“簡(jiǎn)單前端彈窗小案例分享！ ”這方面的相關(guān)內(nèi)容分享，當(dāng)然了實(shí)現(xiàn)的方法肯定不只有一種，有感興趣的小伙伴們可以在W3Cschool中進(jìn)行全面的學(xué)習(xí)！
