推特引導模式在iframe彈出它

在Twitter引導是可以跳出框架模式對話框顯示在網站上。但我在現有的web應用程序中使用這個，它使用了很多iframe。問題是;如果您在iframe中打開TB模式，則會在該iframe中顯示居中。我想在當前打開的頁面上顯示它的模態。隨着模式的背景/下垂。但是如何..？我嘗試過「window.parent.parent.document。*」，但內容不顯示。 example 推特引導模式在iframe彈出它

來源

2012-10-18 user1469734

這裏有一些有用的建議：https://github.com/twitter/bootstrap/issues/936 –

我使用助手方法注入/更新模態。它適用於您的iframe場景。

在IFRAME：

$(function() { 
    window.parent.renderModal(".my-modal-class", "My modal content"); 
});

的renderModal需要在父頁面範圍繳費。這裏是它的代碼：

function renderModal(selector, html, options) { 
    var parent = "body", 
     $this = $(parent).find(selector); 

    options = options || {}; 
    options.width = options.width || 'auto'; 

    if ($this.length == 0) { 
    var selectorArr = selector.split("."); 
    var $wrapper = $('<div class="modal hide fade ' + selectorArr[selectorArr.length-1] + '"></div>').append(html); 
    $this = $wrapper.appendTo(parent); 
    $this.modal(); 
    } else { 
    $this.html(html).modal("show"); 
    } 

    $this.css({ 
    width: options.width, 
    'margin-left': function() { 
     return -($(this).width()/2); 
    } 
    }); 
}

來源

2012-10-19 08:04:52 tomaszbak

非常好;謝謝！但有時模式對話框位於iframe中的iframe中。所以應該調用一個window.parent.parent.renderModal（），然後是一個雙親。沒有函數調用mooooosssst父窗口嗎？ – user1469734

@ user1469734是的，'window.top'是最頂層的父項。要檢查你是否是最上面的窗口，你可以做'var amiTop = window.top === window;' – Christian

如果您使用的是jQuery，它會變得更清晰一些。

在你的iframe頁面（我有一個按鈕）

$('#tasks-modal').click(function(){ 
     window.parent.renderModal('#taskModal'); 
    });

你在哪裏傳遞模型ID。注意：模態代碼必須加載到您調用它的頂部框架上。

然後在頂部框架，你只需有：

function renderModal(selector) { 
     $(selector).modal('show'); 
}

偉大工程.....

來源

2015-07-07 12:11:35

推特引導模式在iframe彈出它

回答

相關問題