只用html5和css3的modal對話方塊

http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
http://netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.html#close

關鍵在這裡：

.modalDialog {
    opacity:0;
    pointer-events: none;
}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

pointer-events取值[none|auto]表示是否響應滑鼠。而:target偽類在目標被選中時（比如bookmark跳轉)生效。一開始。modalDialog設定為不響應滑鼠事件。當modalDialog被選中時。才能夠響應滑鼠。當從modalDialog點選別的連結時，由於modalDialog不再具有:target偽類屬性，不透明度歸回為0. 可以看到modalDialog一直都全屏覆蓋在頁面上，為什麼沒有擋住下面的連結呢？因為modalDialog不響應滑鼠，滑鼠事件就穿透到下面了。

關於為什麼不用display:none而是用opacity:0, 用opacity可以有淡入淡出的效果。 對於FireFox或是Chrome等現代瀏覽器，則半透明覆蓋下面的元素會被遮住，無法選擇或點選