<html>
</head>
<body >
<style>
#div-parent {
position:relative;
}
#div-child-right {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-child-left {
position:absolute;
top:0;
left:0;
width:200px;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
opacity:0.1;
}
</style>
<SPAN CLASS="modal-backdrop"></SPAN>
<div id="parent" style="position:relative;border:1px solid #FF0000;">
<div id="child" style="position:absolute">
bbbb
</div>
<div>&&&&&&&&&&&&&&&&&&&&&&&&&</div>
</div>
<div id="parent" style="position:relative">
cccccccccccccccc
<div id="child" style="position:absolute">
ddd
</div>
</div>
<span id="showmodel" οnclick="showmodel()">xxxx</span>
<script>
funtion showmodel(){
document.getElementById("modal-backdrop").display="show";
}
</script>
</body>
</html>
</head>
<body >
<style>
#div-parent {
position:relative;
}
#div-child-right {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-child-left {
position:absolute;
top:0;
left:0;
width:200px;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
opacity:0.1;
}
</style>
<SPAN CLASS="modal-backdrop"></SPAN>
<div id="parent" style="position:relative;border:1px solid #FF0000;">
<div id="child" style="position:absolute">
bbbb
</div>
<div>&&&&&&&&&&&&&&&&&&&&&&&&&</div>
</div>
<div id="parent" style="position:relative">
cccccccccccccccc
<div id="child" style="position:absolute">
ddd
</div>
</div>
<span id="showmodel" οnclick="showmodel()">xxxx</span>
<script>
funtion showmodel(){
document.getElementById("modal-backdrop").display="show";
}
</script>
</body>
</html>