我實(shí)現(xiàn)的這個(gè)和許多網(wǎng)站上的登錄彈出窗口差不多,大家舉一反三,先看我寫完后的結(jié)果。

點(diǎn)擊創(chuàng)建相冊(cè)后

會(huì)在這個(gè)屏幕的中間顯示創(chuàng)建相冊(cè)的表單,整個(gè)背景顏色變暗,點(diǎn)擊右上角的X會(huì)關(guān)閉這個(gè)表單。
html代碼
創(chuàng)建按鈕
<li id="create"><a href="#form" rel="external nofollow" ><span>創(chuàng)建相冊(cè)</span></a></li>
背景div和表單div
<div class="background"></div><div id="form"> <div class="fh"> <h1>創(chuàng)建相冊(cè)</h1> <a class="close"><img src="pics/close.png" /></a> </div> ...</div>css代碼.background { display: none; position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:#fff; background:-moz-radial-gradient(50% 50%, #fff, #000);/*gradient for firefox*/ background:-webkit-radial-gradient(50% 50%, #fff, #000);/*new gradient for webkit */ background:-webkit-gradient(radial, 0 50%, 0 50%, from(#fff), to(#000));/*the old grandient for webkit*/ opacity:0.5; filter:Alpha(opacity=50);}#form { display: none; position:fixed; border: 1px solid #ccc; background-color:white; top:30%; left:30%; width: auto; border-radius:15px; -moz-border-radius:15px; box-shadow:0 5px 27px rgba(0,0,0,0.3); -webkit-box-shadow:0 5px 27px rgba(0,0,0,0.3); -moz-box-shadow:0 5px 27px rgba(0,0,0,0.3);}JavaScript代碼
function showForm() { var create = document.getElementById("create"); var bg = document.getElementsByClassName("background")[0]; var form = document.getElementById("form"); var links = document.getElementsByClassName("close"); for(var i=0;i<links.length;i++) { links[i].onclick = function() { form.style.display = "none"; bg.style.display = "none"; } } create.onclick = function() { form.style.display = "block"; bg.style.display = "block"; }主要原理是改變背景div和表單div的display屬性,值為block時(shí)顯示,值為none時(shí)元素消失。而position:fixed; 是相對(duì)于當(dāng)前窗口的。
總結(jié)
以上所述是小編給大家介紹的css和js實(shí)現(xiàn)彈出登錄居中界面完整代碼,希望對(duì)大家有所幫助!
|
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注