2012-07-30 55 views
2

我目前正在從這個SITE定製jquery警報。當警報出現時,我試圖實現灰色透明背景,但一直不成功。我怎樣才能得到一個灰色的透明屏幕,覆蓋了alertbox背後的整個背景?這是我EXAMPLECSS:自定義jquery警報透明背景

CSS

<style> 
#popup_container { 
    font-family: Arial, sans-serif; 
    font-size: 12px; 
    min-width: 300px; /* Dialog will be no smaller than this */ 
    max-width: 600px; /* Dialog will wrap after this width */ 
    background: #FFF; 
    border: solid 5px #999; 
    color: #000; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
} 

#popup_title { 
    font-size: 14px; 
    font-weight: bold; 
    text-align: center; 
    line-height: 1.75em; 
    color: #666; 
    background: #CCC url(images/title.gif) top repeat-x; 
    border: solid 1px #FFF; 
    border-bottom: solid 1px #999; 
    cursor: default; 
    padding: 0em; 
    margin: 0em; 
} 

#popup_content { 
    background: 16px 16px no-repeat url(images/info.gif); 
    padding: 1em 1.75em; 
    margin: 0em; 
} 

#popup_content.alert { 
    background-image: url(images/info.gif); 
} 

#popup_content.confirm { 
    background-image: url(images/important.gif); 
} 

#popup_content.prompt { 
    background-image: url(images/help.gif); 
} 

#popup_message { 
    padding-left: 48px; 
} 

#popup_panel { 
    text-align: center; 
    margin: 1em 0em 0em 1em; 
} 

#popup_prompt { 
    margin: .5em 0em; 
} 
</style> 
+0

您的意思是說您希望某種疊加在您的頁面上以使其變暗? – 2012-07-30 07:06:04

回答

1

你需要的東西像this fiddle

的 'alertblanket' 有一個高的z-index和覆蓋整個頁面。然後,您的對話必須有較高的z-index要對「alertblanket」

編輯的頂部:你可以簡單地通過設置

$.alerts.overlayiOpacity = 0.5 
$.alerts.overlayColor = '#AAA' 

或者任何你喜歡的設置警戒庫的顏色。另請參閱jquery.alerts.js的.js文件中的註釋。

+0

謝謝,這是完美的!我錯過了JS文件中的那部分內容 – CodingWonders90 2012-07-30 07:47:24