js遮罩效果制作彈出注冊(cè)界面效果
更新時(shí)間：2017年01月25日 11:40:49 作者：萬(wàn)花果子
這篇文章主要為大家詳細(xì)介紹了js遮罩效果制作彈出注冊(cè)界面效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js遮罩效果彈出界面的具體代碼，供大家參考，具體內(nèi)容如下
<head>
<meta charset="UTF-8">
<title>遮罩</title>
<style>
* {
margin: 0;
padding: 0;
}
#shade{
position: fixed;
width: 100%;
height: 100%;
display: none;
}
.shade-background{
width: 100%;
height: 100%;
background-color: #CCCCCC;
opacity: 0.5;
}
#register{
position: relative;
background-color: #fff;
width: 500px;
height: 300px;
top: -70%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="shade">
<div class="shade-background"></div>
<div id="register">
用戶名<input type="" name="" id="" value="" /><br />
密 碼<input type="" name="" id="" value="" /><br />
<input type="submit" name="" id="reg" value="注冊(cè)" />
</div>
</div>
<div>
<input type="button" name="" id="btn" value="彈出遮罩" />
</div>
</body>
<script>
var shade = document.getElementById("shade");
var btn = document.getElementById("btn");
var reg = document.getElementById("reg");
btn.onclick = function(){
shade.style.display = "block"
}
reg.onclick = function(){
shade.style.display = "none"
}
</script>
效果圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序轉(zhuǎn)化為uni-app項(xiàng)目的方法示例
這篇文章主要介紹了微信小程序轉(zhuǎn)化為uni-app項(xiàng)目的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了JS Canvas接口和動(dòng)畫效果大全，對(duì)Canvas感興趣的同學(xué)，可以參考下2021-04-04
dtree 網(wǎng)頁(yè)樹狀菜單及傳遞對(duì)象集合到j(luò)s內(nèi)，動(dòng)態(tài)生成節(jié)點(diǎn)
最近要做一個(gè)聯(lián)系人的選擇框，選擇聯(lián)系人后，將聯(lián)系人的手機(jī)號(hào)添加到網(wǎng)頁(yè)的輸入框，可以支持復(fù)選框2012-04-04
這篇文章主要介紹了JS中的進(jìn)制轉(zhuǎn)換以及作用的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
微信小程序?qū)崿F(xiàn)watch監(jiān)聽
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)watch監(jiān)聽，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
json_decode 索引為數(shù)字時(shí)自動(dòng)排序問(wèn)題解決方法
這篇文章主要介紹了使用son_encode 給前端返回?cái)?shù)據(jù)，結(jié)果順序不對(duì)，經(jīng)debug調(diào)試，發(fā)現(xiàn)是json_encode 函數(shù)的問(wèn)題,變成 " " + 數(shù)字即可,需要的朋友可以參考下2020-03-03
這篇文章主要為大家詳細(xì)介紹了nodejs與javascript中aes加密的相關(guān)資料，感興趣的朋友可以參考一下2016-05-05
近幾天在做百度地圖時(shí),需要轉(zhuǎn)換時(shí)間格式并做顯示,下面這篇文章主要給大家介紹了關(guān)于js中各種時(shí)間格式的轉(zhuǎn)換方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
js原生跨域_用script標(biāo)簽的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇js原生跨域_用script標(biāo)簽的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
JavaScript展開運(yùn)算符和剩余運(yùn)算符的區(qū)別詳解
本文主要介紹了JavaScript展開運(yùn)算符和剩余運(yùn)算符的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01