He conseguido rescatar el código de un compañero del foro
deirdre, que hace con jquery lo que buscábamos, y funciona tanto en IE como en FF. Muchas gracias
deirdre.
http://www.forosdelweb.com/f77/conse...howbox-734261/
El código adaptado al ejemplo que os quiero mostrar es el siguiente:
Código HTML:
Ver original<!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"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="css/estilo.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> var popupStatus = 0;
function loadPopup() {
if (popupStatus == 0) {
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
};
function disablePopup() {
if (popupStatus == 1) {
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
};
function centerPopup() {
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
$("#popupContact").css({
"position": "absolute",
"top": windowHeight / 2 - popupHeight / 2,
//"top": 10,
"left": windowWidth / 2 - popupWidth / 2
});
$("#backgroundPopup").css({
"height": windowHeight
});
};
$(document).ready(function () {
$("#button").click(function () {
centerPopup();
loadPopup();
});
$("#popupContactClose").click(function () {
disablePopup();
});
$("#backgroundPopup").click(function () {
disablePopup();
});
$(document).keypress(function (e) {
if (e.keyCode == 27 && popupStatus == 1) {
disablePopup();
}
});
});
<div id="button">ABRIR MODAL BOX
</div>
<a id="popupContactClose">x
</a> <p>Envíenos su opinión, la tendremos en cuenta. Gracias
</p> <div id="main_content_single"> <form method="post" action="contact.php"> <input class="textfield" type="text" name="nombre" maxlength="64" value="" /> <input class="textfield" type="text" name="email" maxlength="64" value="" /> <div id="backgroundPopup"></div> <p>Deirdre para Foros del Web
</p>
Estilo css
Código CSS:
Ver original/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border: 0pt none;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
padding: 0;
vertical-align: baseline;
}
/* fin reset */
body {
background: #fff none repeat scroll 0%;
line-height: 1;
font-size: 12px;
font-family: arial,sans-serif;
margin: 0;
height: 100%;
}
a {
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#backgroundPopup{
display: none;
position: fixed;
_position: absolute; /* necesario para internet explorer 6 */
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #ccc;
border: 1px solid #cecece;
z-index: 1;
}
#popupContact{
display: none;
position: fixed;
_position: absolute; /* necesario para internet explorer 6*/
width: 420px;
height: 370px;
background: #FFFFFF;
border: 12px solid #cecece;
z-index: 2;
padding: 12px;
font-size: 13px;
}
#popupContact h1{
text-align: left;
color: #800000;
font-size: 22px;
font-weight: 700;
border-bottom: 1px solid #D3D3D3;
padding-bottom: 2px;
margin-bottom: 20px;
}
#popupContactClose {
font-size: 14px;
line-height: 14px;
right: 6px;
top: 4px;
position: absolute;
color: #800000;
font-weight: 700;
display: block;
}
.button{
text-align: center;
font-size: 11px;
}
#button{
text-align: center;
font-size: 13px;
cursor: pointer;
width: 100px;
margin: 0 auto;
margin-top: 10px;
}
.textfield {
margin-bottom: 15px;
background-color: #ccc;
color: #484848;
border: 1px solid #383838;
padding: 4px 3px;
font-size: 0.9em;
width: 360px;
}
#main_content_single {
font-size: 1.0em;
color: #484848;
margin: 5px 40px 5px 0;
line-height: 1.5em;
}
.textarea {
width: 360px;
font-family: Arial, Verdana, Tahoma, Geneva, sans-serif;
font-size: 0.9em;
background-color: #ccc;
color: #484848;
border: 1px solid #383838;
padding: 4px 3px;
}
#grafico {
width: 200px;
height: 200px;
background-image:url('../image/noentiendo.png');
border-bottom: 2px solid #484848;
margin: 0 auto;
}
#cab {
width: 100%;
text-align: center;
margin-top: 20px;
}
El problema es que no centra la ventana MODAL en mitad de la pantalla, sino que cuenta al parecer los pixels de la ventana del navegador y lo ajusta a ese tamaño. Esto es un problema porque si el tamaño real de la página es mas largo, cuando se abre la ventana queda arriba del todo.
¿Alguna idea?
Muchas gracias de antemano!