Z-index css Pop-up box y ie7
-
03-07-2019 - |
Pregunta
Tengo algunos cuadros de div que deberían mostrar un cuadro de voz cuando se desplaza. Con jQuery y CSS no es nada difícil.
Sin embargo, el mensaje emergente aparece debajo del div vecino en IE7. No puedo hacer que aparezca debajo de él (vea las tomas).
Intenté jugar con el índice z en diferentes lugares sin éxito.
FF texto alternativo http://img134.imageshack.us/img134/5314/63386894.png IE7 texto alternativo http://img396.imageshack.us/img396/932990.png
HTML
<div class="boardshot_list">
{% for ... %}
<span class="img_box">
<a href="/site_media/xxx" target="_blank">
<img class="trigger" src="xxx" alt="{{ item.title }}" />
</a>
<div class="container_speech_box popup">
<div class="two">
<b class="tl"><b class="tr"></b></b>
<p>
blabla
</p>
<b class="bl"></b><b class="br"><b class="point"></b></b>
</div>
</div>
</span>
{% endfor %}
</div>
CSS
div.boardshot_list span.img_box {
display:block;
width:220px;
height:180px;
float: left;
margin: 0 10px 10px 0;
position: relative;
}
img.trigger{
border:1px solid #373743;
}
div.popup
{
display: none;
position: absolute;
z-index: 50;
}
/* POPUP rounded box */
.container_speech_box div:after {content: "."; display: block; height:11px; clear:both; visibility:hidden;}
.container_speech_box div {width:300px; height:auto; font-family:verdana; font-size:11px;}
b.tl {display:block; width:300px; height:8px; font-size:1px;}
b.tr {display:block; width:292px; height:8px; font-size:1px; float:right;}
b.bl {display:block; width:8px; height:8px; font-size:1px; float:left;}
b.br {display:block; width:292px; height:8px; font-size:1px; float:right; position:relative;}
b.point {display:block; font-size:1px; width:25px; height:14px;}
.container_speech_box div p {padding:8px; margin:0; border:3px solid #4f5b69; border-width:0 3px; text-align:justify;}
div.two b.tl {background:url(/site_media/images/top_left2.gif) top left no-repeat;}
div.two b.tr {background:url(/site_media/images/top_right2.gif) top right no-repeat;}
div.two p {background:#fff;}
div.two b.bl {background:url(/site_media/images/bottom_left2.gif) top left no-repeat;}
div.two b.br {background:url(/site_media/images/bottom_right2.gif) top right no-repeat;}
div.two b.point {background:url(/site_media/images/point2.gif) top left no-repeat; margin:5px 0 0 125px;}
/* end popup table */
div.boardshot_list {
width: 700px;
clear: left;
min-height: 80px;
}
div.boardshot_list .memo_id {
padding-left: 10px;
position: relative;
float:right;
color:#60564d;
font-size: 25px;
padding-top: 20px;
width: 50px;
top: 30px;
left: 10px;
font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
}
div.boardshot_list.even {
background-color: #f3f5f6;
}
div.boardshot_list .title span{
color: #bbb;
font-weight: normal;
}
div.boardshot_list .img img {
border:1px solid #373743;
}
JS
<script type="text/javascript">
$(document).ready(function(){
$('.img_box').each(function () {
// options
var distance = 10;
var time = 250;
var hideDelay = 50;
var hideDelayTimer = null;
// tracker
var beingShown = false;
var shown = false;
var trigger = $('.trigger', this);
var popup = $('.popup', this).css('opacity', 0);
// set the mouseover and mouseout on both element
$([trigger.get(0), popup.get(0)]).mouseover(function () {
// stops the hide event if we move from the trigger to the popup element
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// don't trigger the animation again if we're being shown, or already visible
if (beingShown || shown) {
return;
} else {
beingShown = true;
// reset position of popup box
popup.css({
top: -10,
left: 20,
display: 'block' // brings the popup back in to view
})
// (we're using chaining on the popup) now animate it's opacity and position
.animate({
top: '-=' + distance + 'px',
opacity: 0.9
}, time, 'swing', function() {
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// store the timer so that it can be cleared in the mouseover if required
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
popup.animate({
opacity: 0
}, time, 'swing', function () {
shown = false;
popup.css('display', 'none');
});
}, hideDelay);
});
});
});
</script>
Solución
Creo que esto se debe a un error z-index
en Internet Explorer. Los elementos posicionados (es decir, los elementos con una posición
que no sea static
) establecen su propio contexto de apilamiento.
http://www.quirksmode.org/bugreports/archives /2006/01/Explorer_z_index_bug.html
En mi experiencia, es como si todos sus div.boardshot_list span.img_box
tuvieran un índice z de 0
, y elementos dentro de cada div.boardshot_list span.img_box
tiene un z-index
es de 0.1
, 0.2
y así sucesivamente, en lugar de 1 y
2
.
Debería poder solucionar el problema configurando el índice z de span.img_box
que contiene la ventana emergente visible en 1
, de esta forma:
// reset position of popup box
popup.css({
top: -10,
left: 20,
display: 'block' // brings the popup back in to view
})
$(this).css('z-index', '1');
No te olvides de restablecerlo a 0
cuando desaparezca la ventana emergente.
Otros consejos
Probablemente se deba a un conflicto de resolución de estilo de varias clases ( .container_speech_box y .popup
) en diferentes navegadores. Intente ajustar .popup div alrededor de .container_speech_box.