純手工製作圖片popup效果

自己做圖片popup的感覺挺好玩的，

雖然現在網路上有很好用的fancybox，

可是我很想知道如果自己做要怎麼做，然後我就用個超級簡略版!

有空再來把它改進成一個plugin，我也很想挑戰寫plugin，只是我想會很low而已。><

我把整個範例檔都放到我的github了

https://github.com/winwu/Handmade-image_popup
可以看到完整的html跟js檔案

功能說明:

• 點選任何一張圖都會呈現popup效果
• popup效果出來時，點選關閉或是頁面其他地方，也會關閉popup效果

其實想到這個popup的效果，我當初唯一想到的一件事情就是，當我按下頁面中的任何一張圖片，我要讓他有跳(彈)出來的效果，所以我想說我必須要準備一個容器(div)，當作圖片popup時的容器，(當然也有其他做法)，一開始沒有點選任何圖片時，這個容器是display:none，也就是不需要顯示他，當我按下某一張圖片時，這個容器就必須顯示出來，不但要display:block，而且有些相關的css設定，還有背景要壓灰等等，這些都透過javascript來達成。

附圖javascript部分: (截圖下來比較快)

只是個人平常的練習，看看就好:P