How to create a pop-up div in asp.net using Javascript

During the times that I had no knowledge at all in Javascript, I always wonder how can I come up with a message box that allows me to display an error or nofication to the user. I even attemped to forcefully display a message box the same way that I do in Windows applications but it only worked in VB.net and not in C#. Furthermore the result of invoking a message box in ASP.net through VB.net didn't work as expected because the message box doesn't show on top of the page but as separate item on the taskbar (minimized) in which you have to click first to see it fully.


After playing around with a simple Javascript code I am now presenting you a simple ASP.net application that allows you to display a DIV on the top of your page that you can use in whichever way you want it. You can add controls to it as you usually do wether client side controls or server side controls and let them function in the way you want them.
So what are things that you need in order to make this happen?
First, you have to have a Javascript functions that control the visibility and properties of your DIV. One function for showing the DIV and another one for hiding it.


Copy and paste this code inside the tag of your page: view the code here

Create a CSS for you DIV:

#popup_content
{
position: absolute;
visibility: hidden;
overflow: hidden;
border:1px solid #CCC;
background-color:#F9F9F9;
border:1px solid #333;
}

Link you CSS to your page by dragging and dropping the css file from your solution explorer to the code in between the opening and closing "head" tags.

Call the function on your Onclick or Onmouseover event of you HTML control and see the result of you work.

Thank you very much! Have fun!