Ciao ragazzi, oggi ho un altro problema da porre!!
sto lavorando su una modale... l'ho inserita nel mio sito, ma non riesco ad allinearla "sopra" perchè mi appare allineata a sinistra e oltretutto su fondo pagina.
Un esempio lo potete vedere su www.fuel-qp.com.
io vorrei apparisse al centro della pagina e oltretutto sopra tutto il resto, oscurando un attimo ciò che ce dietro.
Vi riporto i codici che ho usato,che voi sicuramente sapete forse meglio di me:
Struttura modale:
<div id="hover"></div>
<div id="popup">
<div id="close">X</div>
<div id="tweet"><img src="http://crebs.it/wp-content/themes/crebs/images/bird.gif" /></div>
<h2>Follow me on Twitter!</h2>
<a href="https://twitter.com/andrevank" class="twitter-follow-button" data-show-count="false" data-lang="it">Segui @andreavank</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);j s.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (document,"script","twitter-wjs");</script>
</div>
successivamente ho inserito gli stili css cosi:
#container{
width:960px;
margin:auto;
padding:20px;
}
p{
margin-bottom:20px;
line-height:24px;
}
h1, h2{
colorrange;
font-size:24px;
margin-bottom:20px;
font-weight:bold;
margin:20px 0;
}
#hover{
position:fixed;
background:#000;
width:100%;
height:100%;
opacity: .6
}
#popup{
position:absolute;
width:600px;
height:180px;
background:#fff;
left:50%;
top:50%;
border-radius:5px;
padding:60px 0;
margin-left:-320px; /* width/2 + padding-left */
margin-top:-150px; /* height/2 + padding-top */
text-align:center;
box-shadow:0 0 10px 0 #000;
}
#close{
position:absolute;
background:black;
color:white;
right:-15px;
top:-15px;
border-radius:50%;
width:30px;
height:30px;
line-height:30px;
text-align:center;
font-size:8px;
font-weight:bold;
font-family:'Arial Black', Arial, sans-serif;
cursorointer;
box-shadow:0 0 10px 0 #000;
}
e per finire lo script:
$(document).ready(function(){
//chiusura al click sulla parte scura
$("#hover").click(function(){
$(this).fadeOut();
$("#popup").fadeOut();
});
//chiusura al click sul pulsante
$("#close").click(function(){
$("#hover").fadeOut();
$("#popup").fadeOut();
});
});
Forse ce un errore sul dove ho inserito i codici, non lo so, se riuscite a modificarmi i codici e ad indicarmi dove inserirli mi risolvete un problema esistenziale...
Grazie mille in anticipo e mi scuso in anticipo se ho sbagliato sezione
Rispondi quotando