Страшный попап.
<style>
#fs_popup_bg {
z-index:9999;
opacity:0.9;
left:0;
top:0;
position:fixed;
width:100%;
height:100%;
background:#000;
}
#fs_popup {
margin:10% 20%;
z-index:10000;
position:fixed;
width:600px;
border-radius: 25px;
border: 5px solid #FF0000;
height:300px;
background: #000080;
padding: 1px 10px 10px 10px;
}
.fs_content_left, .fs_content_right {
float: left;
padding: 5px:
font-size: 20px;
font-family: Arial;
}
</style>
<div id='fs_popup_bg'>
<div id='fs_popup'>
<div class='fs_popup_head'>
</div>
<div class='fs_content'>
<div class='fs_content_left'>
</div>
<div class='fs_content_right'>
</div>
</div>
</div>
Лучше подключить что-то типа jquery + fancybox:
<link rel="stylesheet" href="https://raw.github.com/fancyapps/fancyBox/master/source/jquery.fancybox.css" />
<div hidden>
<div id="popup-content">Тестовый контент для модального окна</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://raw.github.com/fancyapps/fancyBox/master/source/jquery.fancybox.pack.js"></script>
<script>
if (!sessionStorage.visited) {
document.body.appendChild(document.createTextNode('Первый заход, через 3 секунды появится окно.'));
setTimeout(function(){
$.fancybox.open($('#popup-content'), {type: 'inline'});
sessionStorage.setItem('visited', 1);
}, 3000);
} else {
document.body.appendChild(document.createTextNode('Окно показано не будет в этот раз.'));
sessionStorage.removeItem('visited');
}
</script>
