如何讓iframe中彈出的層顯示在整個網頁上

在工作中，我們經常遇到需要在iframe中彈出div層并讓它顯示在整個頁面上方的情況。這里我們可以通過在iframe頁面添加js腳本來實現，在父窗體中動態創建一個div，并將其顯示在最頂層。 創建文

在工作中，我們經常遇到需要在iframe中彈出div層并讓它顯示在整個頁面上方的情況。這里我們可以通過在iframe頁面添加js腳本來實現，在父窗體中動態創建一個div，并將其顯示在最頂層。

創建文件夾和文件

首先，在文件夾中創建兩個文件：一個是iframe頁面，另一個是父頁面index。

引入iframe頁面

然后打開父頁面index，在其中引入iframe頁面。

在iframe頁面添加按鈕

接下來，在iframe頁面中添加一個按鈕，該按鈕用于觸發彈出div層的操作。

修改iframe頁面

在瀏覽器中打開index頁面，此時頁面上只有一個在iframe中的按鈕。

現在我們對iframe頁面進行修改，在按鈕上添加onclick事件調用"show"方法。通過"show"方法，在父頁面的body中動態創建一個div層并顯示出來。需要注意的是，將這個層的style中的position屬性設置為"absolute"，并設置z-index足夠大的值，使其能夠顯示在頂層。

function show() {
    var showdiv  ('div');
    ('id', 'topdiv');
    ('style', 'position:absolute;z-index:999;width:300px;height:300px;');
    var tt  ('我是iframe彈出層');
    (showdiv).appendChild(tt);
}

查看效果

現在我們再次在瀏覽器中打開index頁面，然后點擊iframe頁面中的按鈕"彈出層"，就會彈出一個藍色的div層，并且位于父頁面內容之上顯示。