piccolo popup slider

**pdinillo** · 14-08-2012, 23:37

volevo realizzare un piccola tabella e farla comparire utilizzando un effetto slide......
dal basso verso l'alto
o da sinistra verso destra
ho usato qst script

il problema che il movimento è troppo veloce, troppo netto.......

è possibile farlo comparire in modo piu lento e graduato?

codice:

<script type="text/javascript">$("#avvio").click(function(){   $("#box").effect("slide"); }); 
</script>

codice:

  $("#box").slideUp("slow");

ho provato inserendo qst ma sbaglio qlc

thx

**cavicchiandrea** · 15-08-2012, 00:07

Per aprire dal basso verso l'alto devi usare animate vedi su jquery operazione complessa (è un po rognosa da gestire)

**Enzaccio** · 15-08-2012, 03:22

T' ho fatto questo pe' gioca' che non ciò sonno ...
vedi un po' se ti ci orienti:

codice:

<script type="text/javascript">
 var h = 1;
 var hmax;
 function avvia(){
 hmax = document.getElementById("tab").offsetHeight;
 t3=setInterval('if(h<hmax){document.getElementById("divo").style.height=h++;}else{clearInterval(t3);};', 20);
 } 
</script>

<body onload="avvia();">

<div id="divo" 
  style="height: 1px; overflow: hidden; position: absolute; bottom: 50%; left: 50%">
<table id="tab" bgcolor="#AAAAFF">
 <tr bgcolor="#DDDDFF"><td>olé olé</td></tr>
 <tr bgcolor="#DDDDFF"><td>tralla-la ...</td></tr>
 <tr bgcolor="#DDDDFF"><td>zum pa-pà</td></tr>
</table>
</div>

**pdinillo** · 15-08-2012, 21:59

magari l'avro inserito male ma è statico.........

e poi

codice:

<div id="divo"    style="height: 1px"; overflow: hidden; position: absolute; bottom: 50%; left: 50%">

ho messo 200px per provare.......

**pdinillo** · 15-08-2012, 22:14

se citassi il sito dove ho visto quello che vorrei fare.....si fa prima? si puo?

**Xinod** · 16-08-2012, 10:18

http://www.bennadel.com/blog/1827-Us...d-Elements.htm

**pdinillo** · 17-08-2012, 23:41

grazie a tutti ho risolto.....utilizando qst codice trovato qui

http://www.webstutorial.com/jquery-p...e-popup/jquery

funziona tutto.....l'unico problema che una volta azionato il popup overlay, e una volta chiuso....rimane l'overlay...cioè

lo z-index impostato tramite css è superiore a quello del resto del contenuto....il risultato è che "tutto quello che è sotto" all' overlay nn è cliccabile

il codice è qst

codice:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>     
<script type="text/javascript"> function openOffersDialog() { 	$('#overlay').fadeIn('fast', function() { 		$('#boxpopup').css('display','block');         $('#boxpopup').animate({'left':'30%'},2500);     }); }   function closeOffersDialog(prospectElementID) { 	$(function($) { 		$(document).ready(function() { 			$('#' + prospectElementID).css('position','absolute'); 			$('#' + prospectElementID).animate({'left':'-100%'}, 1500, function() { 				$('#' + prospectElementID).css('position','fixed'); 				$('#' + prospectElementID).css('left','100%'); 				$('#overlay').fadeOut('fast'); 			}); 		}); 	}); }   
</script> 



 <body onload="openOffersDialog();"> 
<div id="wrapper2">
 <div id="overlay" class="overlay">
</div> 
 <div id="boxpopup" class="box"> 
	<a onclick="closeOffersDialog('boxpopup');" class="boxclose"></a> 
<div id="content"> 
  	</div> 
</div>
</body>  


 <style type="text/css">  
 #wrapper2{ 
	
color:#000000; 	
font-family:tahoma; 
font-size:14px; 	
margin:0 auto; 	
width:800px; 	
margin-top:50px;
 } 


 #wrapper2 a{ 
cursor:pointer; 	
font-size:15px;
 font-weight:bold; 	
text-decoration:underline; 

}  

.overlay {          
bottom: 0;    
 left: 0;     
position: fixed;     
right: 0;    
 top: 0;     
z-index: 1; 	
opacity:0.5; 
}   

.box {  
  background:url("ntyou.jpg") no-repeat white;     
color: #888888;     
height: 505px;     
left: 100%;     
padding: 20px;    
 position: fixed;     
right: 30%;     
top: 25%;     
width: 255px;    
 z-index: 2; 	
border:5px solid #888888;
 border-radius:10px; 	
-moz-border-radius:10px; 
}    

a.boxclose {     
background: url("cel.png") repeat scroll left top transparent;    
 cursor: pointer;     
float: right;     
height: 26px;     
left: 32px;     
position: relative;     
top: -33px;     
width: 26px; 
} </style>

come risolvo?
una volta che si clicca sulla x per chiudere il popup dovrebbe tornare come prima...

**pdinillo** · 18-08-2012, 22:39

codice:

<script> setTimeout(function(){document.getElementById('overlay').style.zIndex='-1';},10) </script>

ho provato a inserire una cosa del genere ma nn funziona.... omeglio i link del sito non sono cliccabili

Discussione: piccolo popup slider

Strumenti discussione

Ricerca discussione

Visualizza

piccolo popup slider

Permessi di invio