Code for showing floating div in a webpage

Description



In your project if you need to show data in a floating div mean div will appear over the web page then use this html code and javascript function to hide the div.There is div in below code whose id "DivText" that can used to to bind data.There is also a crose sysmbol to close the div.This is useful when you need to show data onmouseover of gridview or repeater.



<div id="popDiv" runat="server" style="position:
absolute; width: 320px; border: solid 1px #96c1e7;margin:
25px 0px 0px 20px; background-color: #ffffff;
display: none; z-index: 2;opacity: 0;
padding: 5px; overflow: auto;">
<div align='right'>
<a runat='server' id='A2' title='Close' href='javascript:void(0);' style='background-color: #666666;color: #FFFFFF;
font-weight: bold; font-size: 13px;
text-decoration: none; border: outset thin #FFFFFF;
padding-left: 5px; padding-right: 5px;
padding-bottom: 5px;' onclick='CloseDiv();'>
X</a>
</div>
<br />
<div align="left" id="DivText" runat="server" style="width: 300px;">
</div>
</div>


Javascript function



function CloseDiv()
{

document.getElementById("popDiv").style.display = 'none';
}


Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: