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