Вот пример:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Popup</title>
<style>
.popup_window_wrap {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:10;
display: none;
background-color:rgba(0,0,0,0.7);
overflow:auto;
}
.popup_window_wrap:target {
display: block;
}
.popup_window {
position:absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height:220px;
width: 220px;
padding: 10px 20px;
background-color:#fff;
}
</style>
</head>
<body>
<a href="#popup">Show popup</a>
<div class="popup_window_wrap" id='popup'>
<div class="popup_window">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, eos, eum eveniet cumque sit natus veniam libero ea quisquam fuga quis placeat soluta accusamus debitis voluptatibus quasi molestiae! Labore, delectus.</p>
<a href="#">Close popup</a>
</div>
</div>
</body>
</html>
Как работает можно посмотреть на
jsbin.com/xetojoho или
jsfiddle.net/kisonic/86Gf5
Кто-нибудь так уже делал? С какими трудностями столкнулись?
Пока знаю только такой косяк, что если на сайте указан
<base href="http://site.ru/">, то ссылка будет вести на корень сайта, соответственно, на других страницах, кроме главной, это не будет работать.
