I'm making a website with the jQuery tools overlay widget, and it works well on Firefox and Chrome, but as always, it have problems in Internet Explorer, specifically IE8, where the masking background affects even the overlay, making impossible to click anywhere on the page, even closing the overlay.
Here's the element:
<div id="caja" class="wizard modal">
<p id="texto"></p>
<div class="contenedorCheckbox"><input type="checkbox" class="mostrarAyuda" /><span class="mostrarAyuda">Mostrar la ayuda la próxima vez</span></div>
<br/>
<button type="button" id="anterior">< Anterior</button>
<button type="button" id="siguiente">Siguiente ></button>
<button type="button" id="salir">Salir</button>
</div>
The jQuery code:
$('#comercio_index_content_body #caja').overlay({
top: 170,
mask: {
color: '#fff',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: false,
load: true,
onClose: function () {
$("body").css("overflow", "");
}
});
(I have overflow:hidden on document ready before this)
And the css:
.modal {
background-color:#fff;
display:none;
width:350px;
padding:15px;
text-align:left;
border:2px solid #333;
opacity:0.8;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc;
}
I don't know all the incompatibilities that Explorer have with css, so, can you tell me please what's wrong with this code?
Thanks in advance
EDIT: I got the problem, but it's a different issue, so I'm leaving this question to make another one.