彈出窗口并且此窗口帶有半透明的遮罩層效果
更新時間：2014年03月13日 17:59:27 作者：
這篇文章主要介紹了如何點擊一個按鈕實現(xiàn)彈出一個居中窗口，并且此窗口帶有半透明的遮罩層效果,需要的朋友可以參考下
本章節(jié)介紹一下如何點擊一個按鈕實現(xiàn)彈出一個居中窗口，并且此窗口帶有半透明的遮罩層效果，此效果在當下比較流行，當然還有更為復(fù)雜的實現(xiàn)方式，當然效果也更為絢麗，下面介紹的代碼能夠簡單實現(xiàn)此小姑。
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#fade {
display:none;
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:black;
z-index:1001;
-moz-opacity:0.8;
opacity:.80;
filter:alpha(opacity=80);
}
#light{
display:none;
position:absolute;
top:25%;
left:25%;
width:50%;
height:50%;
padding:16px;
border:3px solid orange;
background-color:white;
z-index:1002;
overflow:auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
var linkbt=document.getElementById("linkbt");
var light=document.getElementById('light');
var fade=document.getElementById('fade');
var closebt=document.getElementById("closebt");
linkbt.onclick=function(){
light.style.display='block';
fade.style.display='block';
}
closebt.onclick=function(){
light.style.display='none';
fade.style.display='none';
}
}
</script>
</head>
<body>
<a href="javascript:void(0)" id="linkbt"> 點擊這里打開窗口</a>
<div id="light"><a href="javascript:void(0)" id="closebt">關(guān)閉窗口</a></div>
<div id="fade""></div>
</body>
</html>
以上代碼實現(xiàn)了我們的要求，下面簡單介紹一下它的實現(xiàn)過程。
一.實現(xiàn)原理:
在默認狀態(tài)下，遮罩層和窗口都是隱藏不可見的，當點擊鏈接之后，能夠使窗口和遮罩層顯示，并且將遮罩層設(shè)置為半透明狀態(tài)。此兩個元素都采用絕對定位同時設(shè)置居中窗口的z-index屬性值大于遮罩層，這樣就可以使其覆蓋在遮罩層之上。當點擊關(guān)閉按鈕的時候，能夠?qū)⒄谡謱雍痛翱陔[藏，原理大致如此。
代碼如下:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#fade {
display:none;
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:black;
z-index:1001;
-moz-opacity:0.8;
opacity:.80;
filter:alpha(opacity=80);
}
#light{
display:none;
position:absolute;
top:25%;
left:25%;
width:50%;
height:50%;
padding:16px;
border:3px solid orange;
background-color:white;
z-index:1002;
overflow:auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
var linkbt=document.getElementById("linkbt");
var light=document.getElementById('light');
var fade=document.getElementById('fade');
var closebt=document.getElementById("closebt");
linkbt.onclick=function(){
light.style.display='block';
fade.style.display='block';
}
closebt.onclick=function(){
light.style.display='none';
fade.style.display='none';
}
}
</script>
</head>
<body>
<a href="javascript:void(0)" id="linkbt"> 點擊這里打開窗口</a>
<div id="light"><a href="javascript:void(0)" id="closebt">關(guān)閉窗口</a></div>
<div id="fade""></div>
</body>
</html>
以上代碼實現(xiàn)了我們的要求，下面簡單介紹一下它的實現(xiàn)過程。
一.實現(xiàn)原理:
在默認狀態(tài)下，遮罩層和窗口都是隱藏不可見的，當點擊鏈接之后，能夠使窗口和遮罩層顯示，并且將遮罩層設(shè)置為半透明狀態(tài)。此兩個元素都采用絕對定位同時設(shè)置居中窗口的z-index屬性值大于遮罩層，這樣就可以使其覆蓋在遮罩層之上。當點擊關(guān)閉按鈕的時候，能夠?qū)⒄谡謱雍痛翱陔[藏，原理大致如此。
您可能感興趣的文章:
相關(guān)文章
JS賦值、淺拷貝和深拷貝（數(shù)組和對象的深淺拷貝）實例詳解
這篇文章主要介紹了JS賦值、淺拷貝和深拷貝,結(jié)合實例形式總結(jié)分析了JavaScript數(shù)組和對象的深淺拷貝相關(guān)概念、原理、操作技巧與使用注意事項,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了JavaScript獲取用戶所在城市及地理位置的實例代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-04-04
mock.js實現(xiàn)模擬生成假數(shù)據(jù)功能示例
這篇文章主要介紹了mock.js實現(xiàn)模擬生成假數(shù)據(jù)功能,結(jié)合實例形式分析了mock.js插件生成模擬數(shù)據(jù)的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
最近項目結(jié)束，很空閑，于是就試著仿照微信跳一跳寫了一個極簡版的游戲，到底簡單到什么程度呢?大家可以參考下本文2018-01-01
這篇文章主要介紹了微信小程序如何實現(xiàn)五星評價功能,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了JavaScript前端中的設(shè)計模式，設(shè)計模式是一套被反復(fù)使用，多數(shù)人知曉的，經(jīng)過分類編目的，代碼設(shè)計經(jīng)驗的總結(jié)，感興趣想要詳細了解可以參考下文2023-05-05
這篇文章主要介紹了js中!和!!的區(qū)別與用法,js中!的用法是比較靈活的，它除了做邏輯運算常常會用！做類型判斷，可以用！與上對象來求得一個布爾值，需要的朋友可以參考下2020-05-05
js特效,頁面下雪的小例子，需要的朋友可以參考一下2013-06-06
前后端分離的項目中,前端工作人員會要求后端返回指定格式的JSON數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于如何根據(jù)后端返回的url下載json文件的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07