z-index css Pop-up box et ie7
-
03-07-2019 - |
Question
J'ai quelques boîtes div qui devraient afficher une boîte de dialogue en vol stationnaire. Avec jQuery et CSS, rien n’est trop difficile.
Cependant, le message contextuel apparaît sous le div du voisin dans IE7 - je ne peux pas le faire apparaître sous celui-ci (voir les prises de vue).
J'ai essayé de jouer avec z-index à différents endroits sans succès.
FF texte de remplacement http://img134.imageshack.us/img134/5314/63386894.png IE7 texte de remplacement http://img396.imageshack.us/img396/9329/95483890.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>
La solution
Je pense que cela est dû à un bogue z-index
dans Internet Explorer. Les éléments positionnés (c'est-à-dire les éléments avec un position
autre que statique
) établissent leur propre contexte de pile.
http://www.quirksmode.org/bugreports/archives /2006/01/Explorer_z_index_bug.html
D'après mon expérience, c'est comme si tous vos div.boardshot_list span.img_box
avaient un index z de 0
, et des éléments à l'intérieur de chaque div.boardshot_list span.img_box
a un z-index
es de 0.1
, 0.2
et ainsi de suite, au lieu de 1
et 2
.
Vous devriez pouvoir résoudre le problème en définissant l'index z de la span.img_box
contenant la fenêtre contextuelle visible sur 1
, comme suit:
// 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');
N'oubliez pas de le réinitialiser sur 0
lorsque la fenêtre contextuelle disparaît.
Autres conseils
Cela est probablement dû au conflit de multiplications de classes ( .container_speech_box et .popup
) dans différents navigateurs. Essayez d’enrouler .popup div autour de la .container_speech_box.