Hi everyone, I'm new here. I've written a code that contains CSS & HTML & JavaScript , in the code below There must be 4 buttons next to an area , & by clicking each buttons , you should see different information [using JavaScript] , but here I don't want to replace the new information by previous content of <p> tag! I want to use a popup window [similar to alert or text box somehow] to show the content of my buttons, I need the exact code to see if the result is as the same as what I've wanted or not, so I'll be glad to write me the exact code & complete my code below :

Thanks everyone

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style>
p{
position:relative;
width:800px;
height:400px;
background-color:#060;
font-size:36px;
alignment-adjust:central;
margin-top:10px;
vertical-align:central;
}


ul{
list-style:none;
position:absolute;
right:0;
top:0px;
}

ul li button{
width:100px;
margin:5px;
padding:30px;
}

#blanket {
background-color:#111;
opacity: 0.65;
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}

#popUpDiv {
position:absolute;
background:url(pop-back.jpg) no-repeat;
width:400px;
height:400px;
border:5px solid #000;
z-index: 9002;
}

#popUpDiv { a position:relative; top:20px; left:20px}
</style>

<body>
<div align="center" >
<p rows="4" cols="50" id="demo">
Click each buttons to read the related information!
</p>
</div>


<ul>
<li><button type="button" onclick="myFunction(1)" class="bt">Farnoosh</button></li>
<li><button type="button" onclick="myFunction(2)" class="bt">Hamed</button></li>
<li><button type="button" onclick="myFunction(3)" class="bt">Shayan </button></li>
<li><button type="button" onclick="myFunction(4)" class="bt">Majid</button></li>
</ul>

</body>
</html>
<script>
function myFunction(v)
{
var r = document.getElementsByClassName("bt");
var x = document.getElementById("demo");
switch (v)
{
case 1:
x.innerHTML="Farnoosh Hejazi is one of the webdevelopers works at Datis Netwrok, her field is JavaScript.";
break;
case 2:
x.innerHTML="Hamed is one of the webdevelopers works at Datis Netwrok, his field is everything!.";
break;
case 3:
x.innerHTML="Shayan is one of the webdevelopers works at Datis Netwrok, his field is HTML & CSS.";
break;
case 4:
x.innerHTML="Majid is one of the webdevelopers works at Datis Netwrok, his field is Networking.";
break;
default:
break;
}
}

</script>