2012-07-30 5 views
2

Je travaille actuellement avec une alerte jquery personnalisée à partir de ce SITE. J'essaie d'obtenir un arrière-plan gris transparent lorsque l'alerte apparaît mais n'a pas été satisfaisante. Comment puis-je obtenir un écran gris transparent couvrant tout l'arrière-plan derrière la boîte d'alerte? Voici mon EXAMPLECSS: Personnalisé Jquery Alert- fond transparent

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

Vous voulez dire que vous voulez une sorte de superposition sur votre page pour l'atténuer? –

Répondre

1

Vous avez besoin quelque chose comme dans this fiddle

Le 'alertblanket' a un z-index élevé et recouvre la totalité de la page. Votre dialogue doit alors avoir un z-index plus élevé d'être au-dessus de la « alertblanket »

EDIT: Vous pouvez définir la couleur de cette bibliothèque d'alerte en définissant simplement

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

Ou tout ce que vous aimez . Voir aussi les commentaires dans le fichier .js de jquery.alerts.js

+0

Merci c'est parfait! J'ai raté cette partie dans le fichier JS – CodingWonders90