|
Сообщение от cha0s
|
|
рони, твой код делает по центру вертикали всей страницы, например высота страницы height=10000px он выставит на height=5000px, мне это не надо, мне надо по центру вертикали окна того что видит пользователь,
|
а разве не так ? нажми на одну из картинок она всегда будет в центре видимой части -- независимо от прокрутки
добавлено только реагирование на скрол и размеры окна
но лучше присваивать класс элементу который содержит параметры что указал
danik.js,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<style type="text/css">
<!--
body{
height: 10000px;
width: 1000px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery.fn.center = function()
{
var w = $(window);
this.css("position","absolute");
this.css("top",(w.height()-this.height())/2+w.scrollTop() + "px");
this.css("left",(w.width()-this.width())/2+w.scrollLeft() + "px");
return this;
}
function creatOverlay(){
var docHeight = $(document).height();
$("<div id='overlay'></div>")
.appendTo("body")
.height(docHeight)
.css({
'opacity': 0.4,
'position': 'fixed',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});
$(this).clone().appendTo("body").center().css({'z-index': 5001}).attr({'id' : 'cln'})
}
function remov()
{
$("#overlay, #cln").remove();
}
function fix()
{
$('#cln').center()
}
$(window).on({"scroll" : fix, "resize" : fix});
$(document).on({"click": creatOverlay, }, "img");
$(document).on({"click": remov}, "#overlay, #cln");
</script>
</head>
<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" style="position: fixed">
<img src="http://javascript.ru/forum/images/smilies/write.gif" alt="" style="position: relative; left: 100px; top: 200px">
</body>
</html>