jQuery UI 1.10.3 Dialog modal 為 true 時在 IE7 會 memory leak

如題。在 close dialog 後，還是大約會有 4MB 左右的 memory leak。查了一下，這是因為 jQuery UI framework 在顯示 overlay 這一層的問題吧。當然這個問題在 chrome/firefox 都不會出現。

為了解決 memory leak，要將 modal = true 改為 false。等於是不用 jQuery UI framework 的 overlay 層。這樣的話就要自己寫出 overlay 的這一層。好險寫這個不是很難，不然以我淺底子，可能就掛了。

首先當然是在 jQuery UI dialog 初始化時要將 modal 設為 false

$("#dialog-form").dialog({modal: false});

然後用一 div 來製造 overlay 效果。該 div 的 css 為：

div.my-overlay {
  opacity:0.5;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity:0.5;
  background:#aaaaaa;
  width:100%;
  height:100%;
  z-index:10;
  top:0;
  left:0;
  position:fixed;
}

上面有一堆要將此 overlay 透明度設為 0.5 的 code，這是為了相容於各種版本瀏覽器的緣故。

然後在 html body 產生以下

<div id="dialog-form-overlay" class="my-overlay"></div>

至於控制的 js 就蠻簡單的，也是用 jQuery 來做

顯示：$('#dialog-form-overlay').show(0);
隱藏：$('#dialog-form-overlay').hide(0);

上面參數值 0 就是指 duration 為 0。這邊我是要讓它馬上出來馬上消失，所以就設為 0。

如此，經過驗證，在 IE7 就不會有 memory leak 啦！