在工作中，我們經(jīng)常遇到需要在iframe中彈出div層并讓它顯示在整個(gè)頁(yè)面上方的情況。這里我們可以通過(guò)在iframe頁(yè)面添加js腳本來(lái)實(shí)現(xiàn)，在父窗體中動(dòng)態(tài)創(chuàng)建一個(gè)div，并將其顯示在最頂層。 創(chuàng)建文

在工作中，我們經(jīng)常遇到需要在iframe中彈出div層并讓它顯示在整個(gè)頁(yè)面上方的情況。這里我們可以通過(guò)在iframe頁(yè)面添加js腳本來(lái)實(shí)現(xiàn)，在父窗體中動(dòng)態(tài)創(chuàng)建一個(gè)div，并將其顯示在最頂層。

創(chuàng)建文件夾和文件

首先，在文件夾中創(chuàng)建兩個(gè)文件：一個(gè)是iframe頁(yè)面，另一個(gè)是父頁(yè)面index。

引入iframe頁(yè)面

然后打開(kāi)父頁(yè)面index，在其中引入iframe頁(yè)面。

在iframe頁(yè)面添加按鈕

接下來(lái)，在iframe頁(yè)面中添加一個(gè)按鈕，該按鈕用于觸發(fā)彈出div層的操作。

修改iframe頁(yè)面

在瀏覽器中打開(kāi)index頁(yè)面，此時(shí)頁(yè)面上只有一個(gè)在iframe中的按鈕。

現(xiàn)在我們對(duì)iframe頁(yè)面進(jìn)行修改，在按鈕上添加onclick事件調(diào)用"show"方法。通過(guò)"show"方法，在父頁(yè)面的body中動(dòng)態(tài)創(chuàng)建一個(gè)div層并顯示出來(lái)。需要注意的是，將這個(gè)層的style中的position屬性設(shè)置為"absolute"，并設(shè)置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);
}

查看效果

現(xiàn)在我們?cè)俅卧跒g覽器中打開(kāi)index頁(yè)面，然后點(diǎn)擊iframe頁(yè)面中的按鈕"彈出層"，就會(huì)彈出一個(gè)藍(lán)色的div層，并且位于父頁(yè)面內(nèi)容之上顯示。