淺談利用JS實現(xiàn)彈出居中背景半透明的方法

摘 要：以JS+CSS結構進行網(wǎng)頁布局是當前流行技術，越來越多的人開始使用JS。它對web技術的發(fā)展以及計算機領域的不斷開拓是一項革新。很多網(wǎng)站、靜態(tài)網(wǎng)頁與設計都開始使用JS+CSS的框架，實現(xiàn)彈出有很多種方法，背景半透明的DIV層方法也有很多，本文針對CSS所具有的多種技術，旨在說明JS+CSS實現(xiàn)彈出居中背景半透明DIV層的方法的方法。該方法在信息集成與頁面顯示效果上有良好的表現(xiàn)，并且該方案的實現(xiàn)不需要額外的用戶限制，簡單易行，便于推廣。

關鍵詞：JS+CSS DIV層 半透明

一、引 言

對于網(wǎng)頁制作初學者來說，由于表格布局比較簡單、制作速度快、容易控制，使用JS+CSS是一種很好的入門方法。隨著Web2.0標準化設計理念的普及，基于JS+CSS的布局更加流行。本文介紹了JS+CSS實現(xiàn)彈出居中背景半透明div層的方法。

二、JS、CSS與DIV

JS簡介：JS是JavaScript的縮寫，是一種動態(tài)類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，廣泛用于客戶端的腳本語言。

CSS簡介：CSS是Cascading Style Sheet的縮寫。譯作“層疊樣式表單”。是用于（增強）控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內容分離的一種標記性語言。使用CSS樣式可以控制許多僅使用HTML無法控制的屬性，是描述HTML元素的規(guī)則。CSS的定義是由三個部分構成：選擇符（selector），屬性（properties）和屬性的取值（value）。基本格式如下：

Selector {property： value}（選擇符{屬性：值}）

選擇符是可以是多種形式，一般是你要定義樣式的HTML標記，例如body、p、table等，你可以通過此方法定義它的屬性和值，屬性和值要用冒號隔開。Body {color： black}

選擇符body是指頁面主體部分，color是控制文字顏色的屬性，black是顏色的值，此例的效果是使頁面中的文字為黑色。DIV簡介： DIV全稱Division，即為劃分，是層疊樣式表中的定位技術，有時可以稱其為圖層。DIV元素是用來為HTML文檔內大塊（block-level）的內容提供結構和背景的元素。DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。

三、設計與實現(xiàn)

1.外部容器。將頁眉、正文及頁腳全部包含在其中的容器，就可視為外部容器。外部容器習慣性設置ID名稱為container，主要設置整個頁面的寬度，對齊方式等，相關的CSS樣式為： #container{width：960px；margin：0px auto；}

2.頁眉設計。頁眉中，主要包括LOGO、導航等，設計簡單明了。標簽設計如下：

在外部獨立樣式表文件中，相對應的CSS樣式設計如下：

#header.logo{width：280px；padding：0px 5px；float：left；}

#header.header_top_right1{width：600px；padding：0px 10px 0px 0px；float：right；}在該樣式中，header.logo主要設置其寬度為280px，內邊距上下為0px，左右為5px并且向左浮動。在header_top_right1中主要設置其寬度為600px，內邊距除了右內邊距為10px外，其他內邊距都為0px，且向右浮動。

3.網(wǎng)頁正文結構。在正文中主要顯示彈出層，或者說是彈出窗口，背景半透明風格的彈出框，并且背景半透明。其設計原理是：創(chuàng)建兩個層，一個高度和寬度都是100%，另一個就是你要彈出的窗口的具體內容，半透明在IE中是用filter： Alpha（opacity=60）；在非IE中opacity：0.60。

點擊這里打開窗口

點擊關閉窗口

相對應的CSS樣式設計如下：

4.背景半透明的DIV層通過超鏈接實現(xiàn)。鏈接的動態(tài)展示也是網(wǎng)頁設計中一項十分重要的技術應用，在CSS中以偽類的形式給出鏈接的4種狀態(tài)：未訪問超鏈接a：link訪問后連接a：active，懸停時超鏈接a：hover和單機未釋放超鏈接a：active，在網(wǎng)頁設計中，經常用到的鏈接樣式有三種，分別是未訪問時的超鏈接，鼠標指針懸停時超鏈接以及單擊訪問后的超鏈接，在設計中可以通過設置這種三種狀態(tài)下有不同背景或顏色來實現(xiàn)鏈接的動態(tài)效果，這種設計，即可以增加網(wǎng)頁的美感成都，也可以提供信息瀏覽記錄，本例中超鏈接CSS樣式設置如下：

a：link{color：#fff：font-size：13px：

background-images：url（images/bgl.gif）：}

a：visited{color：#ccc：font-size：13px：

background-images：url（images/bg2.if）：}

a：hover{color：#ff7300：font-size：158px：

background-images：url（images/bg3.gif）；}

運行該頁面，其效果如圖1所示。

四、結語

通過HTML頁面元素，再結合CSS及JS，實現(xiàn)了標準設計網(wǎng)站的JS+CSS整體布局，充分將JS+CSS標準化設計網(wǎng)站的特點體現(xiàn)出來，明確內容表現(xiàn)的同時將結構長度分離的效果，替代了傳統(tǒng)的table-tr-td嵌套設計風格，以全新的角度解晰當前動態(tài)網(wǎng)頁結構設計。

參考文獻：

[1]梁景紅.Web Designer Idea—設計師談網(wǎng)頁設計思維[M].北京：電子工業(yè)出版社，2006.

[2]孫榮俠.在DreamweaverMX中CSS樣式的應用探索[J]. 多媒體技術及其應用，2007，22（05）：1415-1416.

[3]喬巍.基于CSS的商務網(wǎng)站導航設計[J].商場現(xiàn)代化，2012，13（07）：39-41.

[4]曾順.精通CSS+DIV網(wǎng)頁樣式與布局[M].北京：人民郵電出版社，2010.

[5]梁靜琳.DIV+CSS 布局技術在網(wǎng)頁設計中的應用[J].武漢工程職業(yè)技術學院學報，2009，21（01）：42-45.