模式彈出像谷歌

如何使模式彈出，如Gmail（當我們試圖上傳exe文件生成彈出覆蓋網頁的滾動條）模式彈出像谷歌

來源

2010-06-18 Niraj Choubey

看看下面的模式對話框插件的jQuery：

來源

2010-06-18 11:46:46

看看在modal option in jQuery UI Dialog，或者如果你的JavaScript alert()功能只需要一個簡單的文本對話框。

來源

2010-06-18 11:41:00 gnarf

GMail運行在iframe上，覆蓋div不在此iframe內，因此它位於iframe的頂部，因此位於滾動條頂部。從GMail的

代碼

html, body { 
    height:100%; 
    margin:0; 
    overflow:hidden; /* no scrollbars (only in the iframe) */ 
    width:100%; 
} 

.cO { /* this is the iframe */ 
    height:100%; 
    width:100%; 
} 

.Kj-JD { 
    background-color:#C3D9FF; 
    border:1px solid #4E5766; 
    color:#000000; 
    outline:0 none; 
    padding:5px; 
    position:absolute; 
    top:0; 
    width:450px; 
    z-index:501; /* div stays on top */ 
} 

.Kj-JD-Jh { /* the shadow */ 
    background-color:#808080; 
    left:0; 
    position:absolute; 
    top:0; 
    z-index:500; 
}

樣本HTML

<body> 
    <iframe class="cO">...</iframe> <!-- the scroll works on the iframe, not the body --> 
    <div class="Kj-JD"></div> <!-- outside the iframe --> 
    <div class="Kj-JD-Jh" style="opacity: 0.5; width: 1440px; height: 361px;"></div> <!-- black background --> 
</body>

要顯示在上面一個div我建議jqModal，它所有爲你努力工作。

來源

2010-06-18 11:43:09 BrunoLM

你能告訴我一個你說的話的例子。 – 2010-06-18 12:15:01

我添加了gmail代碼的一部分，body沒有滾動，但iframe的確如此，div不在iframe內，這意味着它可以放在body內的任何東西的頂部，因此在滾動條。 – BrunoLM 2010-06-18 16:30:43

非常感謝BrunoLM – 2010-06-18 21:19:40

如果您只需要簡單的文本對話框，請查看jQuery UI對話框或JavaScript alert（）函數中的模式選項。

來源

2010-08-02 12:08:56

模式彈出像谷歌

回答

相關問題