快捷導(dǎo)航

DIV+CSS+JS 變灰彈出層

更新時(shí)間：2009年10月27日 13:53:10 作者：

javascript 彈出層效果代碼。需要的朋友可以測(cè)試下。

浮動(dòng)層居中的對(duì)話框效果演示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xml:lang="zn" xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>浮動(dòng)層居中的對(duì)話框效果演示</TITLE> <FCK:META http-equiv=content-type content="application/xhtml+xml; charset=gb2312" /> <STYLE type=text/css> HTML { HEIGHT: 100% } BODY { HEIGHT: 100% } BODY { FONT-SIZE: 14px; FONT-FAMILY: Tahoma, Verdana, sans-serif } DIV.neat-dialog-cont { Z-INDEX: 98; BACKGROUND: none transparent scroll repeat 0% 0%; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100% } DIV.neat-dialog-bg { Z-INDEX: -1; FILTER: alpha(opacity=70); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: #eee; opacity: 0.7 } DIV.neat-dialog { BORDER-RIGHT: #555 1px solid; BORDER-TOP: #555 1px solid; Z-INDEX: 99; MARGIN-LEFT: auto; BORDER-LEFT: #555 1px solid; WIDTH: 30%; MARGIN-RIGHT: auto; BORDER-BOTTOM: #555 1px solid; POSITION: relative; TOP: 25%; BACKGROUND-COLOR: #fff } DIV.neat-dialog-title { PADDING-RIGHT: 0.3em; PADDING-LEFT: 0.3em; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0.1em; MARGIN: 0px; LINE-HEIGHT: 1.2em; PADDING-TOP: 0.1em; BORDER-BOTTOM: #444 1px solid; POSITION: relative } IMG.nd-cancel { RIGHT: 0.2em; POSITION: absolute; TOP: 0.2em } DIV.neat-dialog P { PADDING-RIGHT: 0.2em; PADDING-LEFT: 0.2em; PADDING-BOTTOM: 0.2em; PADDING-TOP: 0.2em; TEXT-ALIGN: center } </STYLE>  <BODY> <H1>浮動(dòng)層居中的效果</H1> <BUTTON onclick=openDialog()>點(diǎn)此演示效果</BUTTON> </BODY></HTML>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章:

彈出層

相關(guān)文章

為JavaScript添加重載函數(shù)的輔助方法
大家都習(xí)慣了重載帶來的便利。JavaScript有沒有重載呢？有人會(huì)回答沒有，因?yàn)楹瘮?shù)會(huì)被覆蓋；有人說有，我們可以模擬重載這一操作。
2010-07-07
一文詳解JavaScript中的Mixin
類的出現(xiàn)最終使JavaScript非常容易使用繼承法,JavaScript類比大多數(shù)人意識(shí)到的更強(qiáng)大,它是構(gòu)建真正的mixins的良好基礎(chǔ)，本文介紹JavaScript中的Mixin介紹的非常詳細(xì)，需要的小伙伴可以參考閱讀一下
2023-04-04
Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁(yè)面方法詳解
Uniapp是一款基于Vue.js框架的跨平臺(tái)開發(fā)工具,支持在一套代碼中開發(fā)出運(yùn)行于各大平臺(tái)的應(yīng)用程序,這篇文章主要給大家介紹了關(guān)于Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁(yè)面的相關(guān)資料,需要的朋友可以參考下
2023-09-09
原生js實(shí)現(xiàn)密碼輸入框值的顯示隱藏
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)密碼輸入框值的顯示隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
整理CocosCreator常用知識(shí)點(diǎn)
這篇文章主要介紹了整理CocosCreator常用知識(shí)點(diǎn)，這些知識(shí)點(diǎn)，平時(shí)幾乎都能用到，希望同學(xué)們看完后，可以自己去試一下，加深印象
2021-04-04
深入講解xhr（XMLHttpRequest）/jsonp請(qǐng)求之a(chǎn)bort
這篇文章主要給大家深入的介紹了關(guān)于xhr（XMLHttpRequest）/jsonp請(qǐng)求之a(chǎn)bort的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
2017-07-07
完美解決IE9瀏覽器出現(xiàn)的對(duì)象未定義問題
下面小編就為大家?guī)硪黄昝澜鉀QIE9瀏覽器出現(xiàn)的對(duì)象未定義問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦
2016-09-09
js正則格式化日期時(shí)間自動(dòng)補(bǔ)0的兩種解法
在javascript開發(fā)中,我們會(huì)遇到日期時(shí)間格式化的問題,下面這篇文章主要給大家介紹了關(guān)于js正則格式化日期時(shí)間自動(dòng)補(bǔ)0的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-10-10
微信小程序通過自定義animate-numbers組件實(shí)現(xiàn)進(jìn)入頁(yè)面時(shí)數(shù)字跳動(dòng)效果
文章介紹了如何在微信小程序中實(shí)現(xiàn)進(jìn)入頁(yè)面時(shí)的數(shù)字跳動(dòng)效果,通過自定義一個(gè)名為`animate-numbers`的組件來實(shí)現(xiàn)這一功能,本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2025-01-01
javascript實(shí)現(xiàn)3D變換的立體圓圈實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)3D變換的立體圓圈效果,涉及javascript動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)滾動(dòng)與變色的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08