Еще вариант, чтобы при нажатии на ссылку подгружался отдельный html файл:
Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
.popup {display:none; width:250px; height:70px; font:13px normal 'Tahoma'; color#033151; background:#ecf6ff; border:8px solid #bbe0ff; position:absolute;}
#background {display:none;
position:fixed;
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px dotted #cecece;
z-index:1;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.no').click(function(){
$('.popup').fadeOut('slow');
$('#background').fadeOut('slow');
});
$('.show').click(function(e){
$('#background').fadeIn('slow');
$('.popup').fadeIn('slow');
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $(".popup'").height();
var popupWidth = $(".popup'").width();
$(".popup'").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
$('.popup').load('file.html');
$("#background").css({
"height": windowHeight
});
});
});
</script>
</head>
<body>
<a href='#' class='show'>show</a><div id="background">
<div class='popup'>
</div>
</div>
</div>
</body>
</html>
$('.popup').load('file.html');
file.html - подгружаемый файл
-------------------------------------------
Code
<script type="text/javascript" src="http://mysite/js/jquery.js"></script>
Код разместить в хеде, предварительно загрузив jquery.js в папку JS на своем сайте Если нужен чистый js, без использования библиотек ( сейчас используется jquery), так же можно реализовать, только без плавного появления.
