js遮罩效果制作彈出注冊界面效果
更新時間：2017年01月25日 11:40:49 作者：萬花果子
這篇文章主要為大家詳細介紹了js遮罩效果制作彈出注冊界面效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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="注冊" />
</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>
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了微信小程序轉(zhuǎn)化為uni-app項目的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要介紹了JS Canvas接口和動畫效果大全，對Canvas感興趣的同學，可以參考下2021-04-04
dtree 網(wǎng)頁樹狀菜單及傳遞對象集合到j(luò)s內(nèi)，動態(tài)生成節(jié)點
最近要做一個聯(lián)系人的選擇框，選擇聯(lián)系人后，將聯(lián)系人的手機號添加到網(wǎng)頁的輸入框，可以支持復選框2012-04-04
這篇文章主要介紹了JS中的進制轉(zhuǎn)換以及作用的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
微信小程序?qū)崿F(xiàn)watch監(jiān)聽
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)watch監(jiān)聽，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
json_decode 索引為數(shù)字時自動排序問題解決方法
這篇文章主要介紹了使用son_encode 給前端返回數(shù)據(jù)，結(jié)果順序不對，經(jīng)debug調(diào)試，發(fā)現(xiàn)是json_encode 函數(shù)的問題,變成 " " + 數(shù)字即可,需要的朋友可以參考下2020-03-03
這篇文章主要為大家詳細介紹了nodejs與javascript中aes加密的相關(guān)資料，感興趣的朋友可以參考一下2016-05-05
近幾天在做百度地圖時,需要轉(zhuǎn)換時間格式并做顯示,下面這篇文章主要給大家介紹了關(guān)于js中各種時間格式的轉(zhuǎn)換方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
下面小編就為大家?guī)硪黄猨s原生跨域_用script標簽的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
JavaScript展開運算符和剩余運算符的區(qū)別詳解
本文主要介紹了JavaScript展開運算符和剩余運算符的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01