Bootstrap Modal內含iframe裡的按鈕如何關閉整個Modal

繼Bootstrap實作modal window一文實作出一個內含iframe表單頁面的Modal後，我們希望增加另一個功能，讓使用者填寫完表單資料並送出後，顯示出一段文字並加上一個按鈕，使用者可點選此按鈕關閉Modal(當然你也可以仿照官方範例，配置一個關閉按鈕在Modal右上角)。

如果我們的Modal是以內建的showModalDialog來實作的話，很簡單，只要使用window.close()便可將Modal關閉，但在Boostrap Modal中無法以此方式關閉Modal，必須利用其API .modal('hide')來達成。但iframe裡的按鈕要怎麼與iframe外的Modal做溝通呢？利用window.parent。

一個方法是在按下按鈕時直接呼叫window.parent.$('#modal').modal('hide')，如onclick="window.parent.$('#modal').modal('hide')"

另一個方法則是先在主頁面上宣告一個呼叫Modal API的function，如

window.closeModal = function() {
    $('#modal').modal('hide');
};

在iframe內的按鈕則透過window.parent呼叫closeModal這個function來關閉Modal，如onclick="window.parent.closeModal()"