html實(shí)現(xiàn)彈窗的實(shí)例
發(fā)布時(shí)間：2021-06-09 16:59:24 作者：小小文呀 
我要評(píng)論
我要評(píng)論本文將結(jié)合實(shí)例代碼，介紹html實(shí)現(xiàn)彈窗的實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
上午閑來(lái)無(wú)事，用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>
到此這篇關(guān)于html實(shí)現(xiàn)彈窗的實(shí)例的文章就介紹到這了,更多相關(guān)html彈窗內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css實(shí)現(xiàn)彈窗上下左右居中且背景透明鎖定窗口效果
這篇文章主要介紹了css實(shí)現(xiàn)彈窗上下左右居中且背景透明鎖定窗口效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參2020-12-23
CSS實(shí)現(xiàn)帶遮罩層可關(guān)閉的彈窗效果
這篇文章主要介紹了CSS實(shí)現(xiàn)帶遮罩層可關(guān)閉的彈窗效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-09- 本篇文章主要介紹了CSS導(dǎo)航欄及彈窗示例代碼，導(dǎo)航欄和彈窗是在web中應(yīng)用很廣泛的，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2017-01-10
- 下面小編就為大家?guī)?lái)一篇彈窗居中的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-25
不是所有彈窗都是流氓 關(guān)于網(wǎng)站彈窗的設(shè)計(jì)技巧
彈窗式的新聞在國(guó)內(nèi)互聯(lián)網(wǎng)服務(wù)中屢見(jiàn)不鮮，實(shí)時(shí)推送的方式對(duì)網(wǎng)站擴(kuò)大覆蓋面非常有效2012-07-31利用js+css簡(jiǎn)單實(shí)現(xiàn)半透明遮罩彈窗
用到遮罩彈窗時(shí)在網(wǎng)上搜索，看到絕大多數(shù)都是基于Jquery的。我不想用那么復(fù)雜的應(yīng)用，于是自己寫(xiě)了一個(gè)。2011-07-27網(wǎng)頁(yè)設(shè)計(jì)中的彈窗與浮層的設(shè)計(jì)
在從傳統(tǒng)的Software逐漸轉(zhuǎn)換到Webware的大潮中，設(shè)計(jì)模式與技術(shù)實(shí)現(xiàn)雙重變革和推進(jìn)下。我們提倡頁(yè)面中的任務(wù)對(duì)應(yīng)用戶群明確，任務(wù)少而精。回到我們傳統(tǒng)的后臺(tái)軟件系統(tǒng)中，2008-10-17
