2015.3.12（遮罩層JS模塊）

      這兩天瞭解了一些前端開發經常使用的工具和庫和框架，有一個疑問，若是大量使用這些現成的框架，會不會致使大材小用呢？就是每個頁面都要加載一遍可能要用的框架和庫，但實際上這個頁面的實現只會用到一小部分，這樣無形中就會拖慢速度或者是形成用戶的流量浪費。這種問題要怎麼解決呢？  沒有開發經驗啊，這種優化問題有點想不明白。

    今天的練習須要一個能夠用於點擊圖片放大圖片以及用於替代系統自帶的alert的遮罩層寫了以下的js模塊。方便在項目中直接調用。

下面是html部分的代碼。只是在button的onclick事件中調用了js模塊；

 

下面是JS模塊的代碼，設置了三個遮罩層，最底下的bottomdiv是一個和屏幕同高同寬的全透明遮罩層，中間的middlediv是一個陰影，和頂部可視的newdiv大小基本一致，只是在定位上略下方一點，能夠達到一個陰影的效果。

 

配色極醜……這裏決定要將button替換成a標籤，用a:hover來模擬按鈕的效果，比自帶的button稍微好一點。

 

日拱一卒，不期速成。