本文實(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í)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
