Issue in displaying pop-up div over target element
Question
I am trying to display a popup div onMouseHover on the image. Currently, the pop is displayed under the scroll bar. I need to display this a floating popup type over the scroll bar of the div instead of hidding beneath the scroll bar.
Thanks in advance!
Sample Code:
CSS
.popBox {
margin: -50px 50px 0px 50px;
z-index: 2;
width: 60px;
padding: 0.3em;
border: 1px solid gray;
}
.images {
width: 50px;
height: 50px;
border-radius: 5px;
}
div.scroll {
background-color: #00FFFF;
width:80px;
height: 200px;
overflow: scroll;
}
</style>
JavaScript
<script>
function showBox(text, obj) {
helpNode = document.createElement('div');
helpNode.id = 'popBox';
helpNode.setAttribute('class','popBox');
helpNode.innerHTML = text;
obj.appendChild(helpNode);
}
function hideBox() {
node = document.getElementById('popBox');
node.parentNode.removeChild(node);
}
</script>
HTML
<body>
<div class="scroll" style="margin:0px auto">
<b onMouseOver="showBox('<b>Foo1</b><br /> Bar1', this)" onmouseout="hideBox()" ><input type="image" class="images" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-511058.jpg" /></b></br>
<b onMouseOver="showBox('<b>Foo2</b><br /> Bar2', this)" onmouseout="hideBox()" ><input type="image" class="images" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-380016.jpg" /></b></br>
<b onMouseOver="showBox('<b>Foo3</b><br /> Bar3', this)" onmouseout="hideBox()" ><input type="image" class="images" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-293063.jpg" /></b></br>
<b onMouseOver="showBox('<b>Foo4</b><br /> Bar4', this)" onmouseout="hideBox()" ><input type="image" class="images" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-611834.jpg" /></b></br>
</div>
</body>
</html>
3 answers
solution1
1 ACCPTED 2014-08-18 18:58:17
Try adding position: absolute; to .popBox
CSS
.popBox {
margin: -50px 50px 0px 50px;
z-index: 2;
width: 60px;
padding: 0.3em;
border: 1px solid gray;
position: absolute;
}
.images {
width: 50px;
height: 50px;
border-radius: 5px;
}
div.scroll {
background-color: #00FFFF;
width:80px;
height: 200px;
overflow: scroll;
}
JavaScript
function showBox(text, obj) {
helpNode = document.createElement('div');
helpNode.id = 'popBox';
helpNode.setAttribute('class','popBox');
helpNode.innerHTML = text;
obj.appendChild(helpNode);
}
function hideBox() {
node = document.getElementById('popBox');
node.parentNode.removeChild(node);
}
HTML
<div class="scroll" style="margin:0px auto">
<b onMouseOver="showBox('<b>Foo1</b><br /> Bar1', this)" onmouseout="hideBox()" ><input type="image" class="images" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-511058.jpg" /></b></br>
<b onMouseOver="showBox('<b>Foo2</b><br /> Bar2', this)" onmouseout="hideBox()" ><input type="image" class="images" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-380016.jpg" /></b></br>
<b onMouseOver="showBox('<b>Foo3</b><br /> Bar3', this)" onmouseout="hideBox()" ><input type="image" class="images" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-293063.jpg" /></b></br>
<b onMouseOver="showBox('<b>Foo4</b><br /> Bar4', this)" onmouseout="hideBox()" ><input type="image" class="images" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-611834.jpg" /></b></br>
</div>
solution2
0 2014-08-18 18:57:13
I tried your code in fiddle and it doesn't work for me, so something must be missing, but to handle your CSS issues, you need to add a position to the z-index'd elements. So, in your case would be like this:
div.scroll {
background-color: #00FFFF;
width:180px;
height: 200px;
overflow: scroll;
position:relative;
z-index:-1
}
This way, that pop out will be over the scrollbar.
Also, as we're at it, replace </br> by <br/> or simply add .images{display:block}
solution3
0 2014-08-18 19:04:50
You will have to append the nodes outside of the element that has overflow: scroll applied to it. By it's nature, overflow: scroll will make your popups need scrolling to see.
You'll probably want to add another wrapper div around the element, and give it position: relative , append your popups to that new wrapper div, and position them with position: absolute (the position: relative on the new wrapper div makes the absolutely positioned children positioned absolutely relative to that element.)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.