Heim > Artikel > Web-Frontend > js-Maskeneffekt zum Erstellen eines Popup-Registrierungsschnittstelleneffekts
js-Maskeneffekt zum Erstellen eines Popup-Registrierungsschnittstelleneffekts
- 高洛峰Original
- 2017-02-03 17:37:101378Durchsuche
Das Beispiel in diesem Artikel teilt den spezifischen Code der js-Maskeneffekt-Popup-Schnittstelle als Referenz. Der spezifische Inhalt ist wie folgt
<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>Rendering:
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website unterstützt.
Weitere Artikel zu JS-Maskeneffekten und Popup-Registrierungsschnittstelleneffekten finden Sie auf der chinesischen PHP-Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Praktische Leistung von JavaScriptNächster Artikel：Praktische Leistung von JavaScript