Достаточно кнопку приподнять z-index(om) сделав у неё позицию relative
(*Но вид у контента кривоватый кнешно
<html>
<head>
<title>Messagebox</title>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style>
body{
background:#FFFFFF;
}
#one{
border:5px solid red!important;
z-index:1;
display:none;
position:fixed;
height:99%;
width:99%;
}
#two p {
padding:7px;
}
#two{
background:#E0E06F;
border:1px solid red!important;
position:fixed;
height:150px;
width:250px;
}
#three{
border:1px solid blue;
margin:0px;
position:absolute;
width:100%;
height:100%;
}
#three p{
text-align:center;
margin:0px;
}
#two button{
right:10px;
top:10px;
position:absolute;
z-index:10;
margin: 0 0 0 0;
}
#four{
position:absolute;
top:55px;
left:0;
height:125px;
}
</style>
<script>
function close_window(){
document.getElementById('two').style.display="none";
document.getElementById('three').style.display="none";
document.getElementById('four').style.display="none";/**/
}
function Drag () {
document.getElementById('two').style.left=x+(event.pageX-x1)+'px';
document.getElementById('two').style.top=y+(event.pageY-y1)+'px';
}
function Stop () {
document.getElementById('one').style.display='none';
}
function twoMousedown (){
var a = document.getElementById('two');
x=a.offsetLeft;y=a.offsetTop;
x1=event.pageX;y1=event.pageY;
document.getElementById('one').style.display='inline';
}
</script>
</head>
<body>
<div id="one" onmousemove="Drag()" onmouseup="Stop ()"> </div>
<div id="two"> <button onclick="close_window()">X</button>
<div id="four">
<p>This is some text </p>
</div>
<div id="three" onmousedown="twoMousedown()">
<p>Window </p>
</div>
</div>
</body>
</html>