Web前端設計模式--製做漂亮的彈出層

設計場景：

       Ben最近在負責一個購書網站，在網站的首頁上，有一個叫作「最新上架」的板塊，板塊的內容比較簡單，只有書籍名稱，做者姓名和上架時間（如圖），當初設計的時候並i沒有過於豐富的構思...

      

       如今問題來了，這個版塊不大，更新頻率卻很高，天天都有十數條最新的信息上去，瀏覽網站的會員對於最新圖書的瞭解和需求愈來愈大，所以須要對這個板塊進行改良，以知足會員的需求，會員的主要要求有如下幾個方面：顯示該最新上架的圖書的封面縮略圖，該圖書的名稱和做者名稱，以及該書部份內容的介紹和做者的簡介...

       這下把Ben給愁壞掉了，首頁上根本就沒有多餘的空間，怎麼來呈現封面縮略圖甚至是內容簡介，若是去掉別的板塊空間來實現這一板塊的擴張，無異於在一家公司以犧牲一個部門來壯大另一個部門，這是萬萬不可取的...

       因而Ben想到了以彈出層的方式來顯示每條信息的詳細內容... 

 

設計目標:

      在不改變頁面結構的狀況下，以彈出層（用Dom重構的方式來實現元素的追加append和移除remove）的方式提升頁面信息量...

 

 

解決方案：

    首先，咱們設計一個Div，樣式以下：

  

代碼

 

 

下面是腳本，當鼠標通過的時候才響應彈出框事件：

 

代碼

 

結果以下（當鼠標指向第三條數據時，彈出該框， 並隨鼠標移動）：

 

作到這邊，會員有了一個新的要求，就是不要彈出框隨着鼠標的移動而移動，那樣鼠標一旦離開焦點，就會移除該彈出框，操做起來不是很方便。他們要求彈出框固定，假設就在相應的數據行的右側吧，並且打開和關閉由會員本身控制，因而Ben就進行改良了...

一樣的，先設計一個id爲tips的Div元素，樣式以下：

 

 

代碼

 

 

腳本以下：

 

代碼

最終顯示效果以下：

 

 

鼠標移動到相應的數據行上面，顯示相應的提示框，右邊的打叉小圖標用以關閉整個彈出層...

 

設計小結：

這個設計過程的關鍵是position：absolute（絕對定位，做用是讓層在頁面上疊加），z-index（用以顯示層的疊加次序），top、left（顯示彈出頁面座標），（offset().left,offset().top）在頁面上找到某個元素的座標，位置找到了，就能夠隨意在它的周邊定位彈出層了，其餘的樣式能夠根據本身的美工需求隨意調節...