Code for showing floating div in a webpage


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();'>
<br />
<div align="left" id="DivText" runat="server" style="width: 300px;">

Javascript function

function CloseDiv()

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

Article by Abhay Kumar Raut
DNS MVM and .Net Guru Team Lead at CirrusCloud Systems Bhubaneswar,Odisha Thanks and Regards, Abhay Kumar Raut

Follow Abhay Kumar Raut or read 39 articles authored by Abhay Kumar Raut


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: