彈跳視窗iframe的運用

要簡單的使用手機形式的iframe彈出視窗
一般要使用的話,都需要寫很多語法,在這邊可以使用
fancybox這個jQuery的外掛

使用時,記得加入class="iframe",加入之後,要在在畫面上設定如下
$('.iframe').fancybox({
    width: '100%',
    height: '70%',
    titlePosition: 'outside'});
注意的是,如果畫面是動態生成的,記得在動態畫面生成之後,立刻加入這行。
一開始使用的時候,發現怎麼按都不會出現彈跳視窗,但是在畫面上寫死的時候,就會work
後來想到應該是順序的問題(HTML上寫死的畫面已經載入,動態生成算是後來才追加的),因此如同作多國語系的時候一樣,
在畫面生成之後加入即可動作。

而如果在ifrmae的畫面中要刷新後方的父頁面(例如在子視窗編輯評論,編輯完成後回到父視窗)
可以加入以下兩行

關閉該子視窗
parent.jQuery.fancybox.close();
(填入原本父視窗的網址)  即可做到關閉子視窗同時刷新父視窗
window.parent.location = "evaluation.html";

PS. 如果沒有加入parent而直接使用window.location = "OOOO.html";的話,會變成刷新子視窗

留言

這個網誌中的熱門文章

jQuery獲取Select選擇的Text和Value(轉)

Android 在Fragment下控制輸入鍵盤