Q

使用javascript和css彈出窗口

2012-01-11 111 views 1 likes

1

我的應用需要在點擊按鈕時生成一個彈出窗口。該應用程序專門針對android和IOS中的移動設備。使用javascript和css彈出窗口

我已經使用此代碼收到了同樣的：

.popup 
{ 
    position:absolute; left:0; top:0; width:132; 
    border-style:solid; 
    border-width:4; 
    border-color:blue; 
    background-color:black; 
    padding:5px; 
    color:white; 
    font-family:Arial; 
    font-weight:bold; 
    font-size:10pt; 
    z-index:2; 
    visibility:hidden; 
}

但我需要的是背景被模糊和殘疾人在彈出窗口打開。我如何實現這一目標？

JavaScript或CSS中的代碼對我來說沒問題。

2012-01-11 Khush

+0

請[唐不要將簽名或標語添加到您的帖子中]（http://stackoverflow.com/faq#signatures）。 – meagar 2012-01-11 04:15:01

A

回答

1

<div id="popup"> 
    <div style="position:absolute;width:100%;height:100%;z-index:9000;opacity:.5,background-color:#000;"></div> 
    <div style="position:absolute;width:400px;height:400px;left:30%;top:20%;z-index:9001;">MY POPUP WINDOW</div> 
</div>

2012-01-11 05:30:27

+0

非常感謝。除了「位置：絕對」這個事實之外，IT工作正常，除非彈出窗口內的關閉按鈕沒有關閉彈出窗口，並且它的「相對」外部任何按鈕都處於活動狀態。任何想法如何處理？ – Khush 2012-01-11 06:06:30

+0

隱藏主容器ID =「彈出」，或者如果這沒有工作隱藏ID =「彈出」的孩子，然後肯定會工作 – 2012-01-11 06:34:32

0

考慮使用jQuery插件，如jQuery Tool's overlay。

2012-01-11 04:16:12 kamchatka

+0

IOS不支持jquery。所以我需要一個特定的JavaScript或CSS。 – Khush 2012-01-11 04:20:49

+0

你的意思是野生動物園？如在iPad/iPhone？如果是這樣，jQuery肯定受支持。 – kamchatka 2012-01-11 04:23:04

+0

我不是指野生動物園。我的應用程序適用於移動設備。所以它在這方面做得並不好。 – Khush 2012-01-11 04:24:34

0

你只要把一個div上面寄託都與位置絕對和它的z-index的東西高仿9999

你可以到這裏看看http://www.w3schools.com/cssref/pr_pos_z-index.asp或使用一些插件，如堪察加提及。

2012-01-11 04:22:34

0

如果您正在爲您的評論中提到的IOS開發，可以查看JQuery Mobile。

2012-01-11 04:28:42 flynfish

+0

jquery mobile擁有自己的CSS。在使用他們的CSS時，它會使我們使用的CSS無效。因此，我們決定堅持純JavaScript。 – Khush 2012-01-11 04:29:40

+0

@Khush我不明白，你應該能夠用你的自定義CSS來覆蓋它們的CSS ... – flynfish 2012-01-11 04:49:51

+0

不，它沒有。 jquery-css覆蓋了我們的應用程序css，另外，jquery代碼不適合與ios開發代碼相同。我們開發跨平臺的應用程序，其中相同的代碼適用於android和IOS。 – Khush 2012-01-11 05:18:59

0

禁用背景或創建模式燈箱非常簡單，並在其他評論中介紹。只要確保將焦點設置在新的燈箱窗口中，或者使用屏幕閱讀器的用戶將會丟失。

創建模糊具有挑戰性。 Webkit在他們的夜晚引入了CSS模糊效果 http://bit.ly/AuBZJO

我相信這是最終的解決方案。現在我們可以使用RGBA將背景div設置爲有點透明，如其他評論者指出的那樣。

或者你也可以在風車傾斜和使用帆布先做一個屏幕捕捉

Can you take a "screenshot" of the page using Canvas?

然後模糊生成的圖像砍在一起的東西

http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

2012-01-11 04:47:35

+0

你能告訴我如何禁用背景並創建模式燈箱嗎？這對我來說是一個好的開始。 – Khush 2012-01-11 04:56:39

+0

另外我需要它的移動設備，所以webkit不會工作。 – Khush 2012-01-11 04:57:06

相關問題