Strona główna » Poradniki » Blogger » Pełnoekranowe okno na stronie
 

Pełnoekranowe okno na stronie

https://mattomatti.com/br03

Wstęp

Przez jednych lubiane przez drugich znienawidzone - pełnoekranowe powiadomienia, reklamy krzyczące zapisz się, polub i wiele innych. Choć tego typu dodatek na stronie z reguły nie wpływa pozytywnie na odbiór to jego odpowiednie użycie może pomóc w promocji bloga. Sęk tkwi w tym, aby nie pokazywać użytkownikowi takiego powiadomienia od razu jak wejdzie na stronę. Może być dopiero pierwszy raz i może się okazać, że ostatni, bo bardzo nie lubi takich okienek. Jednak jeśli takie okienko pojawi się po pewnym czasie, albo po przewinięciu na dół strony to istnieje cień szansy, że nie zauważy tego jako coś nachalnego.

Okienko

Jak jednak dodać takie okienko na stronie? Do głównego znacznika body kodu źródłowego trzeba dodać obiekt, który wypełni całą dostępną przestrzeń i do tego będzie mieć półprzeźroczyste czarne tło. Pośrodku takiego obiektu zostanie dodana część właściwa powiadomienia: krótka wiadomość na białym tle. Poniższy kod realizuje dotychczasowe kroki:

  1. var divp = document.createElement("DIV");
  2. divp.id = "DIVP";
  3. divp.onclick = function(){
  4. var elem = document.getElementById("DIVP");
  5. elem.parentNode.removeChild(elem);};
  6. var divm = document.createElement("DIV");
  7. divp.appendChild(divm);
  8. divm.innerHTML = 'Wiadomość testowa';
  9. document.body.appendChild(divp);

(1.) Utworzenie obiektu tła powiadomienia. (2.) Przypisanie numeru ID. Od tej pory zawsze będzie można znaleźć ten konkretny obiekt w gąszczu innych. (3.) Dodajemy, że po kliknięciu obiektu: (4. - 5.) usuniemy go ze strony tj. zamkniemy okno. (6.) Utworzenie nowego obiektu z treścią. (7.) Dodajemy nowy obiekt jak podrzędny do pierwszego. Następnie wystarczy (8.) dodać treść wiadomości. Można tutaj posłużyć się znacznikami HTML. Ostatni krok to (9.) dodanie obiektu na stronę.

Jednak to jeszcze nie wszystko dodane elementy nie posiadają stylu. Co za tym idzie nie będą odpowiednio sformatowane. Problem należy rozwiązać dodając następujący fragment stylu:

  1. <style>
  2. #DIVP{
  3.  position: fixed;
  4.  left: 0;
  5.  right: 0;
  6.  top: 0;
  7.  bottom: 0;
  8.  background: rgba(0,0,0,0.7);
  9. }
  10. #DIVP > div{
  11.  position: absolute;
  12.  top: 50%; left: 50%;
  13.  transform: translate(-50%,-50%);
  14.  background: #FFF;
  15.  border-radius: 8px;
  16.  border: solid red 2px;
  17.  padding: 2rem;
  18. }
  19. </style>

(2.) Reguły dotyczące tła powiadomienia: (3.) pozycja stała, (4. - 7.) ma wypełniać cały ekran, a (8.) tło ma być czarne, lekko przezroczyste. (10.) Z kolei tło wiadomości ma być (11. - 13.) pośrodku ekranu, (14.) białe tło, (15.) zaokrąglone rogi i (16.) przykuwające uwagę czerwone obramowanie oraz (17.) niewielki margines.

Działanie kodu można przetestować wciskając poniższy guzik:

Zastosowanie

Tego typu kod można zastosować do promocji swojego fanpeg'a jak również ostatnio napisanego postu. Wyświetlaną wiadomość wystarczy zmienić na odpowiedni kod, który wyświetli okienko, aby użytkownik mógł polubić. Przykładowo kod będzie wyglądał jak poniżej. W ty przypadku wyświetli on powiadomienie dotyczące polubienia mojej strony. Jednak można to zmienić na dowolną stronę zmieniając BlogMattoMatti na dowolną inną nazwę witryny:

  1. <iframe
  2. src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FBlogMattoMatti%2F&tabs&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false"
  3. width="516" height="140"
  4. style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

Kod źródłowy

W celu łatwiejszego użycia kodu na swojej stronie napisałem plik, który zawiera w sobie styl i kod javascript. Chcą pokazać wiadomość wystarczy uzyć showPopup() i jako argument podać dowolną treść wiadomości. Na swojej stronie na blospot.com cały kod można bezpośrednio wkleić do obiektu HTML/Javascript.