js當(dāng)前頁(yè)面登錄注冊(cè)框,固定div,底層陰影的實(shí)例代碼
這是一個(gè)實(shí)例,保存代碼為html文件運(yùn)行試試吧。兼容火狐、ie6、ie7、ie8、Chrome等。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS當(dāng)前頁(yè)面登錄注冊(cè)框,固定DIV,底層陰影 - 腳本之家</title> <!-- 一個(gè)按鈕 點(diǎn)擊之后 顯示一個(gè)div div要水平 垂直居中 當(dāng)我瀏覽器高度 寬度變化的時(shí)候 div依然水平 垂直居中 點(diǎn)擊遮罩層,浮動(dòng)層隱藏 知識(shí)點(diǎn): 1.如何用css控制div水平垂直居中 2.如何用js取得瀏覽器高度寬度 3.如何控制resize事件--> <style type="text/css"> .hidden{ display:none} /*評(píng)論浮動(dòng)層*/ #smallLay{width:498px; height:100px;padding:4px 10px 10px;background-color:#FFFFFF;border:1px solid #05549d;color:#333333;line-height:24px;text-align:left;-webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:3px 3px 6px #555;} </style> </head> <script type="text/javascript"> //判斷瀏覽器ie6創(chuàng)建的div的樣式和非ie6創(chuàng)建的div的樣式 //創(chuàng)建div function showid(idname) { var isIE = (document.all) ? true : false; var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6); var newbox = document.getElementById(idname); newbox.style.zIndex = "9999"; newbox.style.display = "block" newbox.style.position = !isIE6 ? "fixed" : "absolute"; newbox.style.top = newbox.style.left = "50%"; newbox.style.marginTop = -newbox.offsetHeight / 2 + "px"; newbox.style.marginLeft = -newbox.offsetWidth / 2 + "px"; var jihualayer = document.createElement("div"); jihualayer.id = "jihualayer"; jihualayer.style.width = jihualayer.style.height = "100%"; jihualayer.style.position = !isIE6 ? "fixed" : "absolute"; jihualayer.style.top = jihualayer.style.left = 0; jihualayer.style.backgroundColor = "#000"; jihualayer.style.zIndex = "9998"; jihualayer.style.opacity = "0.6"; document.body.appendChild(jihualayer); var sel = document.getElementsByTagName("select"); for (var i = 0; i < sel.length; i++) { sel[i].style.visibility = "hidden"; } function jihualayer_iestyle() { jihualayer.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px"; jihualayer.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px"; } function newbox_iestyle() { newbox.style.marginTop = document.documentElement.scrollTop - newbox.offsetHeight / 2 + "px"; newbox.style.marginLeft = document.documentElement.scrollLeft - newbox.offsetWidth / 2 + "px"; } if (isIE) { jihualayer.style.filter = "alpha(opacity=60)"; } if (isIE6) { jihualayer_iestyle() newbox_iestyle(); window.attachEvent("onscroll", function () { newbox_iestyle(); }) window.attachEvent("onresize", jihualayer_iestyle) } jihualayer.onclick = function () { newbox.style.display = "none"; jihualayer.style.display = "none"; for (var i = 0; i < sel.length; i++) { sel[i].style.visibility = "visible"; } } } </script> <body> <div style="width:200px; height:100px;"></div> <input name="" type="button" id="showbtn" value="點(diǎn)擊顯示" onclick="showid('smallLay')" /> <!--收藏浮層開(kāi)始--> <div id="smallLay" style="display:none" > 這<a style="text-decoration:none; color:Gray;">是</a>懸浮層 </div> <!--收藏浮層結(jié)束--> <div id="a" style="height:1000px;">這<a style="text-decoration:none; color:Black;">是</a>普通層</div> </body> </html>
以上就是小編為大家?guī)?lái)的js當(dāng)前頁(yè)面登錄注冊(cè)框,固定div,底層陰影的實(shí)例代碼全部?jī)?nèi)容了,希望大家多多支持腳本之家~
- 用javascript制作qq注冊(cè)動(dòng)態(tài)頁(yè)面
- jsp+dao+bean+servlet(MVC模式)實(shí)現(xiàn)簡(jiǎn)單用戶登錄和注冊(cè)頁(yè)面
- 使用JSP實(shí)現(xiàn)簡(jiǎn)單的用戶登錄注冊(cè)頁(yè)面示例代碼解析
- JS實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)的注冊(cè)頁(yè)面
- JS一個(gè)簡(jiǎn)單的注冊(cè)頁(yè)面實(shí)例
- JavaScript 完成注冊(cè)頁(yè)面表單校驗(yàn)的實(shí)例
- node.js實(shí)現(xiàn)登錄注冊(cè)頁(yè)面
- 原生js驗(yàn)證簡(jiǎn)潔注冊(cè)登錄頁(yè)面
- js正則表達(dá)式注冊(cè)頁(yè)面表單驗(yàn)證
- JS當(dāng)前頁(yè)面登錄注冊(cè)框,固定DIV,底層陰影的實(shí)例代碼
- javascript實(shí)現(xiàn)信息的顯示和隱藏如注冊(cè)頁(yè)面
- php用戶注冊(cè)頁(yè)面利用js進(jìn)行表單驗(yàn)證具體實(shí)例
- JS、CSS和HTML實(shí)現(xiàn)注冊(cè)頁(yè)面
相關(guān)文章
微信小程序開(kāi)發(fā)之視頻播放器 Video 彈幕 彈幕顏色自定義實(shí)例
本篇文章主要介紹了微信小程序開(kāi)發(fā)之視頻播放器 Video 彈幕 彈幕顏色自定義實(shí)例,具有一定的參考價(jià)值,有興趣的同學(xué)可以了解一下。2016-12-12js函數(shù)名與form表單元素同名沖突的問(wèn)題
本篇文章主要是對(duì)js函數(shù)名與form表單元素同名沖突的問(wèn)題進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-03-03js 將canvas生成圖片保存,或直接保存一張圖片的實(shí)現(xiàn)方法
下面小編就為大家分享一篇js 將canvas生成圖片保存,或直接保存一張圖片的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01java遇到微信小程序 "支付驗(yàn)證簽名失敗" 問(wèn)題解決
這篇文章主要介紹了java遇到微信小程序 "支付驗(yàn)證簽名失敗" 問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12利用js正則表達(dá)式驗(yàn)證手機(jī)號(hào),email地址,郵政編碼
利用js正則表達(dá)式驗(yàn)證手機(jī)號(hào),email地址,郵政編碼。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01