Heim > Fragen und Antworten > Hauptteil
(360浏览器兼容模式下)有三个盒子,box1做了蒙蔽效果(position:fixed);box2(position:absoulte);box3(position:absolute;);
点击文字让蒙版出现,box2中的对应个box3显示;因为box3需要水平垂直居中;做了定位;需要给Box2添加宽高;但是给box2添加width和height均为100%是,box3显示之后就不会隐藏了;
<p>
<p class="modelStand1">
文字1
</p>
<p class="modelStand2">
文字2
</p>
</p>
<ul class="modeleImg">
<li class="modelLi1" style="cursor:pointer;">
<img class="modelLimg4" style="width: 800px; height: 290px;" src="" />
</li>
<li class="modelLi2" style="cursor:pointer;">
<img class="modelLimg4" style="width: 800px; height: 290px;" src="" />
</li>
</ul>
<script>function modelXyd(oneBox,twoBox,thereBox){
var a="."+oneBox;
var b="."+twoBox;
var c="."+thereBox;
$(a).on("click",function(e){
$(".modeleImg").show();
$(b).show();
$(c).show();
$(c).on("click",function(e){
$("modeleImg").show();
$(b).show();
$(c).show();
;
if(e && e.stoppropagation){
e.stopPropagation();
}else{
window.event.cancelBubble=true;
}
});
$(document).on("click",function(){
$(".modeleImg").hide();
$(b).hide();
$(c).hide();
});
if(e && e.stoppropagation){
e.stopPropagation();
}else{
window.event.cancelBubble=true;
}
})
};
$(document).ready(function(){
modelXyd("modelStand1","modelLi1","modelLimg1");
modelXyd("modelStand2","modelLi2","modelLimg2");
modelXyd("modelStand3","modelLi3","modelLimg3");
})</script>