Добавлю и свой вариант... Чисто ЦССный по позиционированию.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#box {
position: fixed;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-top: -100px;
margin-left: -200px;
background-color: silver;
border: 1px solid;
display: none;
}
#box label {
display: block;
}
#content {
}
</style>
<script>
function On() {
document.getElementById('bLoad').disabled=true
document.getElementById('box').style.display='block'
}
function Off() {
document.getElementById('bLoad').disabled=false
document.getElementById('box').style.display='none'
}
</script>
</head>
<body>
<div id='box'>
<label for='f1'>File</label>
<input id='f1' type='file' />
<br />
<label for='f2'>Comment</label>
<input id='f2' type='text' />
<br />
<label for='f3'>Name</label>
<input id='f3' type='text' />
<br />
<br />
<input type='button' value='Save' onclick='Off()' />
</div>
<div id='content'>
<p>Всякий разный контент... Всякий разный контент...Всякий разный контент...
</p>
<input id='bLoad' type='button' value='Load file' onclick='On()' />
</div>
</body>
</html>