Currently, I have a situation where I've implemented an overlay div to function as a popup window. This overlay contains a small header with text and a close button represented by the "X" symbol as its child element. Additionally, there is a body content section within this overlay.
I have successfully integrated jQuery functionalities for dragging and resizing the parent overlay popup window. However, there are a couple of issues that I am facing. When scrolling due to large content, the resize handler icon moves up or down based on the scroll position instead of remaining fixed at the bottom as intended. Furthermore, the child divs inside the parent overlay do not resize accordingly when the parent's size changes. How can I resolve these challenges?
Here is the HTML code snippet:
<div id="sendmessage-panel-overlay">
<div id="overlay-header">
<h1 id="title" style="font-size: 12px; float: left; padding-top: 7px;"></h1>
<div id="maximize_icon">
<img src="<c:url value='/images/x-icon.gif'/>" title="Close window" onclick="closePopUp()">
</div>
</div>
<div id="body-content"></div>
</div>
And the corresponding CSS code:
#sendmessage-panel-overlay
{
background-color: white;
border-color: gray;
border-style: solid;
border-width: 1px;
float: left;
height: 500px;
left: 21%;
padding: 0px 17px 17px;
position: fixed;
text-align: center;
top: 10%;
visibility: hidden;
width: 700px;
overflow: auto;
}
#overlay-header
{
width: 700px;
position: fixed;
height: 30px;
background-color: #fff;
}
#maximize_icon {
width: 16px;
height: 16px;
float: right;
}
#body-content {
padding-top: 50px;
padding-left: 10px;
display: inline-block;
}