Вот хороший пример
https://css-tricks.com/snippets/javascript/showhid...
UPD
Вот вам готовое решение:
<script type="text/javascript">
function show(state){
document.getElementById('field').style.display = state;
document.getElementById('window').style.display = state;
}
</script>
<style>
body {
margin: 0;
background-color: #acacac;
padding: 20px;
}
body a {
font-size: 12px;
}
#field {
width: 100%;
height: 100%;
display: none;
position: absolute;
top: 0;
left: 0;
}
#window {
width: 350px;
height: 200px;
display: none;
background-color: #ffffff;
text-align: center;
padding: 30px;
position: relative;
top: 50%;
left: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#window a {
position: absolute;
top: 10px;
right: 10px;
}
</style>
<body>
<a onclick="show('block');" href="#">Показать</a>
<!-- это невидимое поле, по клику скрывает field и window -->
<div onclick="show('none');" id="field"></div>
<!-- это ваше всплывающее окно — window -->
<div id="window">
<p>Привет, я здесь!</p>
<a onclick="show('none');" href="#">Закрыть</a>
</div>
</body>
Здесь я разместил
всплывающее окно временно, можно посмотреть результат:
