Javascript-форум - Как создать свой оверлей с картинкой

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Как создать свой оверлей с картинкой (https://javascript.ru/forum/jquery/37971-kak-sozdat-svojj-overlejj-s-kartinkojj.html)

Как создать свой оверлей с картинкой

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
  });
}

функция вызывается при клике на изображение на странице, подскажите, как добавить это изображение по центру созданного оверлея?

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>

Цитата:

Сообщение от рони (Сообщение 250740)

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 свойство, и тогда вообще все перестает работать.

Estiva,
запоминайте исходное положение картинки и при удалении слоя (не знаю вашего кода) возвращайте назад.
...далее мысли вслух ...

Цитата:

Сообщение от Estiva

можно ли как-нибудь оставлять картинку на основной странице, во время открытого оверлея?

...это для меня загадка...

Цитата:

Сообщение от Estiva

не возвращается назад без обновления страницы

...без коментариев.

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>

Спасибо, теперь все как надо:)