Приветственный экран / заглушка на сайт

Реализация привественного экрана, или заглушки на сайт на базе CMF MODX.

Сниппет welcome

Тут мы проверям — пользователь перешел к нам извне, или уже бал на сайте.

if(stripos($_SERVER['HTTP_REFERER'], MODX_HTTP_HOST) === false){
  return $modx->getChunk('welcome');
}

Чанк welcome

В общем-то может быть любой HTML.


<div class="welcome_wr">
  <div class="welcome_title">welcome title</div>
  <div class="welcome_subtitle">welcome subtitle</div>
  <div class="button_styled"><a href="javascript:void(0)" class="go_to_site">Войти на сайт</a></div>
</div>
<script>
  $(".go_to_site").click(function(){
    $(this).closest(".welcome_wr").remove();
  });
</script>

CSS

.welcome_wr{
  position: fixed;
  top:0;
  bottom:0;
  right: 0;
  left: 0;
  background-color: #fff;
  background-image: url('https://via.placeholder.com/150');
  background-position: 50% 0;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
	z-index: 999999;
	padding-top: 35vh;
	text-align: center;
	color: #fff;
}
.welcome_wr .welcome_title{
  font-size:80px;
}
.welcome_wr .welcome_subtitle{
  font-size:20px;
}
.welcome_wr ~ *{
  opacity: 0;
}

Результат:

Способ поблагодарить автора сайта:

Комментарии (0)

  1. Напишите первый комментарий
*Комментарий будет опубликован после проверки модератором
Добавьте такую строчку на свой сайт за 2 минуты по инструкции
Наш сайт использует куки, нажмите «ОК» если вы не против
OK