淺談利用JS實現彈出居中背景半透明的方法

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

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

一、引 言

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

二、JS、CSS與DIV

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

CSS簡介：CSS是Cascading Style Sheet的縮寫。譯作“層疊樣式表單”。是用于（增強）控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。使用CSS樣式可以控制許多僅使用HTML無法控制的屬性，是描述HTML元素的規則。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標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。

三、設計與實現

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

點擊這里打開窗口

點擊關閉窗口

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

4.背景半透明的DIV層通過超鏈接實現。鏈接的動態展示也是網頁設計中一項十分重要的技術應用，在CSS中以偽類的形式給出鏈接的4種狀態：未訪問超鏈接a：link訪問后連接a：active，懸停時超鏈接a：hover和單機未釋放超鏈接a：active，在網頁設計中，經常用到的鏈接樣式有三種，分別是未訪問時的超鏈接，鼠標指針懸停時超鏈接以及單擊訪問后的超鏈接，在設計中可以通過設置這種三種狀態下有不同背景或顏色來實現鏈接的動態效果，這種設計，即可以增加網頁的美感成都，也可以提供信息瀏覽記錄，本例中超鏈接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，實現了標準設計網站的JS+CSS整體布局，充分將JS+CSS標準化設計網站的特點體現出來，明確內容表現的同時將結構長度分離的效果，替代了傳統的table-tr-td嵌套設計風格，以全新的角度解晰當前動態網頁結構設計。

參考文獻：

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

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

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

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

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