Estimados, tengo un foro piensaradical.cl/v2 y necesito poner este codigo para que me aparezca una imagen flotante con un boton de cerrado y con fondo opaco. Lo tengo listo y lo he probado en otras web pegándolo directamente en el <body> y funciona, pero no funciona en ninguna parte del theme de smf. Quién me ayuda!!!
<div id='ventana-flotante'>
<div id='contenedor'>
<a class='cerrar' href='javascript:void(0);' onclick='document.getElementById('ventana-flotante').className = 'oculto''>x</a>
<div class='contenido'>
</div>
</div>
</div>
<style>
#ventana-flotante {
width: 100%; /* Ancho de la ventana */
height: 790px; /* Alto de la ventana */
position: fixed;
top: 0px;
left: 50%;
margin-left: -50%;
border: 0px solid #ffffff; /* Borde de la ventana */
box-shadow: 0 5px 25px rgba(0,0,0,.1); /* Sombra */
z-index:999;
background: #000000; /* Color de fondo */
background-color:rgba(0,0,0,0.8);
filter:alpha(opacity=80); /* For IE8 and earlier */
position: fixed;
}
#ventana-flotante #contenedor {
padding: 0px 0px 0px 0px;
width: 400px;
height: 400px;
background-image:url('http://www.piensaradical.cl/piensaafiche.jpg');
position:absolute;
left:50%;
margin-left: -200px;
top:20%;
margin-top: -50px;
}
#ventana-flotante .cerrar {
float: right;
border-bottom: 0px solid #bbb;
border-left: 0px solid #bbb;
color: #999;
background: white;
line-height: 17px;
text-decoration: none;
padding: 0px 14px;
font-family: Arial;
border-radius: 0 0 0 5px;
box-shadow: -1px 1px white;
font-size: 18px;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
}
#ventana-flotante .cerrar:hover {
background: #ff6868;
color: white;
text-decoration: none;
text-shadow: -1px -1px red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
#ventana-flotante #contenedor .contenido {
padding: 0px;
box-shadow: inset 1px 1px white;
background: #000000; /* Fondo del mensaje */
border: 0px solid #ffffff; /* Borde del mensaje */
font-size: 20px; /* Tamaño del texto del mensaje */
color: #fff; /* Color del texto del mensaje */
text-shadow: 1px 1px white;
margin: 0 auto;
border-radius: 4px;
}
.oculto {-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;-ms-transition:1s;opacity:0;-ms-opacity:0;-moz-opacity:0;visibility:hidden;}
</style>
te aconsejo que cambies las comillas simples( ' ) por comillas dobles ( " )
por ejemplo, esto:
<div id='ventana-flotante'>
por esto:
<div id="ventana-flotante">
Ponlo todo dentro de esto:
echo ' <!----contenido html------!>';
y a mi parecer, es más fácil usar Jquery para eso que tratas de hacer :v
Edito, olvidé decirte que esto va dentro del index.template.php de tu theme :v