Problemi con Overlay (jQuery)

**caos-zero** · 19-08-2012, 21:24

Salve, avrei questo problema. Vorrei creare un semplice overlay, ma nessun browser me lo visualizza. Mi potete dire il perché?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Primo script con JQuery</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'>
</script>
<style>
.apri{ font-size:18px; font-family:Verdana, Geneva, sans-serif; float:right; margin-right:50px;color:red;}
.chiudi{ font-size:18px; color:#000; font-weight:bold; position:absolute; right:2%; top:0%; cursor

ointer;color:green;}
#overlay{
background-color:black;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
cursor

ointer;

}
#box{ width:600px; height:400px; background-color:#FFF; display:none; z-index:+300; position:absolute; left:30%; top:20%; -moz-border-radius: 15px; -webkit-border-radius: 15px;
border-radius: 15px;}
</style>
<script type="text/javascript">
$(".apri").click(
function(){
$('#overlay').fadeIn('fast');
$('#box').fadeIn('slow');
});

$("#chiudi").click(
function(){
$('#overlay').fadeOut('fast');
$('#box').hide();
});

//chiusura
$('#overlay').click(
function(){
$(this).fadeOut('fast');
$('#box').hide();
});

}); //fine dom
</script>
</head>
<body style="background-color:black";>
<div id="overlay" style="display:none;">
</div>
<div id="box">

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<hr />
<p class="chiudi">X</p>
</div>

<p class="apri">APRI L'OVERLAY</p>
</body>
</html>

**Xinod** · 19-08-2012, 21:57

non puoi parlare di elementi che non ancora sono definiti nel markup
quindi racchiudi quelle istruzioni in $(document).ready(function({...})) o nell' equivalente $(function(){...})

ciao

**cavicchiandrea** · 19-08-2012, 22:01

Ho qualche dubbio sulle impostazioni del div overlay protrebbe essere un problema css prova cosi:

codice:

#overlay{
background-color:black;
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
width:100%;
height:100%;
z-index:100;
cursor:pointer;
display:none;
}

P.S. per avere meno problemi d'adattamento imposta heigth 100% anche per i tag body e html e togli il display in linea di overlay

Edit: chiaramente quello detto da Xinod è corretto (come sempre)

Discussione: Problemi con Overlay (jQuery)

Strumenti discussione

Ricerca discussione

Visualizza

Problemi con Overlay (jQuery)

Permessi di invio