Popup dla gości

Adres forum:
[http://allaboutit.pl/]

Wersja silnika:
[1.8.21]

Opis problemu:
[Witam, chciałbym dodać popup do forum, miałby się wyświetlać zaraz po załadowaniu strony tak na 15s i w środku zawierać informację w stylu "Witaj gościu, nie jesteś jeszcze zalogowany lub nie masz konta na forum?" i pod spodem 2 opcje wyboru "Zarejestruj się | Zaloguj się". Jeszcze tego nie robiłem, a chciałbym to zrobić porządnie, macie może pomysł jak to ugryźć? ]

Konto testowe:
 
Login: Tester1
Hasło: haslo123

Dzięki z góry

html

<div class="guest-popup">
  Witaj gościu...
</div>

css

.guest-popup {
  position: fixed;
  right: 1rem;
  bottom: 2rem;
  display: inline-block;
  background: black;
  color: #ffffffee;
  padding: 1rem;
  border-radius: .3rem;
}

js

<script>
setTimeout(function() {
  document.getElementsByClassName('guest-popup')[0].style.display="none";
}, 15000);
</script>

Wszystko daj na samym dole szablonu header welcomeguest czy coś takiego. Jedynie CSS do arkusza lepiej dać.

Nie patrzyłem jak wygląda obecnie twoje forum. Jeśli będzie to w jakimś elemencie z position relative to będzie trzeba przenieść za pomocą js ten popup wyżej w DOM. Ewentualnie użyć pluginu, aby sprawdzić czy jesteśmy zalogowani. Jeśli tak to wyświetlić to w jakimś innym szablonie, np. footer.

Dzięki wielkie, potestuje i dam znać

---

Ok, więc tak, działa, wyświetla się przez te 15s, zmieniłem na 25 ale to już kwestia gustu. 

Przy wczytaniu strony wyświetla się tak jak widać na pierwszym screenie, podczas scrollowania zmniejsza się i pozostaje w tym samym miejscu. 

Trochę zmniejszyłem szerokość, ale napisy się za bardzo rozjeżdżają w dół, screen poniżej, a druga sprawa chciałbym dodać funkcję logowania i rejestracji pod napisem na środku, jeśli uda się rozwiązać te 2 problemy, to będzie świetnie            

---

Ok Aktualizacja, problem z rozjeżdżaniem tekstu występuje przed scrollowaniem, po już nie, opcję logowania i rejestracji dodałem, chciałbym też żeby popup występował jedynie na stronie głównej, dobrą opcją było by dodanie krzyżyka umożliwiającego zamknięcie popupu

https://community.mybb.com/mods.php?action=view&pid=329

Co do rozjeżdżającego się tekstu, wystarczy do klasy .guest-popup dodać line-height:initial, wtedy "zresetujesz" tą wartość która jest dziedziczona z .header a po przescrollowaniu z .header-shrink.
Natomiast jeśli chcesz mieć ten popup tylko na stronie głównej to pomiń powyższe zdanie a zamiast tego będziesz musiał przenieść popup do szablonu index (najlepiej albo na początek albo na koniec), niestety wtedy będzie się on wyświetlał nie tylko gościom ale i wszystkim zalogowanym użytkownikom, jednak na to też jest sposób. W takiej sytuacji możesz użyć pluginu php in templates i w miejsce popupa wrzuć coś takiego:

<if $mybb->user['usergroup'] == 1 then>
 <div class="guest-popup">
   Witaj gościu...
 </div>
</if>

A co do przycisku zamknięcia to możesz go zrobić w następujący sposób:
html

<div>
  <span class="close">Zamknij</span>
</div>

css

.guest-popup .close{
  display: inline-block;
  padding: 5px 10px;
  background: #af2a2a;
  margin:5px auto;
  border-radius: 5px;
  color:#fff;
}

js

$(".guest-popup .close").click(function(){
  $(".guest-popup").hide();
});

Dzięki zabieram się z testy

---

Działa pięknie  

Z tym, że nie widać przycisku zamykającego, podeślę screen, być może coś nie tak wpisałem    

---

I na przeglądarce Edge nie widać prawie napisów    

Kod przycisku umieść wewnątrz diva z klasą guest-popup bo z tego co widzę to teraz jest poza nim.
Co do koloru tekstu to Edge nie obsługuje niestety zapisu hex z przezroczystością zatem potrzebujesz zamienić color: #ffffffee na color:rgba(255,255,255,0.93)

Działa Dziękuję ślicznie