May 25, 2013

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()"

No comments: