15.05.2013, 20:18
|
|
Новичок на форуме
|
|
Регистрация: 15.05.2013
Сообщений: 3
|
|
|
Как создать свой оверлей с картинкой
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
});
}
функция вызывается при клике на изображение на странице, подскажите, как добавить это изображение по центру созданного оверлея? |
|
15.05.2013, 22:53
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Estiva,
Вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<script src="https://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).center().css({'z-index': 5001})
}
$(document).on({"click": creatOverlay}, "img")
</script>
</head>
<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" >
</body>
</html>
Последний раз редактировалось рони, 22.04.2020 в 21:43.
|
|
16.05.2013, 11:41
|
|
Новичок на форуме
|
|
Регистрация: 15.05.2013
Сообщений: 3
|
|
Сообщение от рони
|
Estiva,
Вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<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).center().css({'z-index': 5001})
}
$(document).on({"click": creatOverlay}, "img")
</script>
</head>
<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" >
</body>
</html>
|
Спасибо, это помогло, но можно ли как-нибудь оставлять картинку на основной странице, во время открытого оверлея? Я добавил затемненному слою метод remove() по клику, и изображение остается там же, где и было(по центру) и не возвращается назад без обновления страницы, пробую менять его position свойство, и тогда вообще все перестает работать.
|
|
16.05.2013, 12:33
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Estiva,
запоминайте исходное положение картинки и при удалении слоя (не знаю вашего кода) возвращайте назад.
...далее мысли вслух ...
|
Сообщение от Estiva
|
|
можно ли как-нибудь оставлять картинку на основной странице, во время открытого оверлея?
|
...это для меня загадка...
|
Сообщение от Estiva
|
|
не возвращается назад без обновления страницы
|
...без коментариев.
|
|
16.05.2013, 12:51
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Estiva,
Вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<script src="https://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();
}
$(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="" >
<img src="http://javascript.ru/forum/images/smilies/write.gif" alt="" >
</body>
</html>
Последний раз редактировалось рони, 22.04.2020 в 21:44.
|
|
16.05.2013, 15:04
|
|
Новичок на форуме
|
|
Регистрация: 15.05.2013
Сообщений: 3
|
|
Спасибо, теперь все как надо  |
|
|
|
