Jdi na obsah Jdi na menu

Pop-up okno

23. 4. 2024

Pop-up okno, či jinak také vyskakovací okno, určitě budete znát :-) Jsou to ta vyskakovací okna, která často obsahují zásadní informace (omezení, uzavírky, akční nabídku). Mohou být užitečné, otravné, nebo obojí. Za nás to je určitě ale užitečný nástroj nabízející obsah, na který chceme upozornit.

sni--mek-obrazovky-2024-04-18-v--13.38.47--1-.png

V této nápovědě si ukážeme v jednotlivých krocích, jak vložit pop-up okno na váš web pomocí HTML, CSS a JavaScriptu. Pro ukázku máme vybranou šablonu Jerry.
 

Postup vložení pop-up okna na web:
 

1. V prvním kroku přejděte do Design > Úvodní strana a klikněte na WYSIWYG / HTML. 

sni--mek-obrazovky-2024-04-18-v--12.54.24.png

2. Vložte HTML kód do úvodní strany a uložte.

sni--mek-obrazovky-2024-04-18-v--12.56.02.png

 

HTML kód pro vložení do úvodní strany:

<div id="myPopup" class="popup-inner">
<div class="close-button">
<button class="popup-button" onclick="hide()" >
<span class="btn-x">x</span>
</button>
</div>
<div class="popup-text">
<p class="popup-text-content-title"><strong>POP-UP</strong></p>
<p class="popup-text-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis vitae erat eget laoreet. Maecenas tincidunt vel est vitae rhoncus. Quisque nec aliquam lorem. Donec luctus elit nibh, quis molestie leo congue nec. Morbi id quam hendrerit, varius tortor sed, tristique orci. Sed tristique pretium quam nec facilisis. Cras viverra viverra dapibus.</p>
</div>
</div>

 

V tomto kroku si můžete změnit text vyskakovacího okna. Nezapomeňte, že musíte být přepnutí na WYSIWYG / HTML. Zvýrazněný text, je v tomto případě text, který si můžete přizpůsobit podle sebe, stačí ho přepsat. Pozor na závorky v kódu, před a za textem. 

Nadpis: <p class="popup-text-content-title"><strong>POP-UP</strong></p>  

Text: <p class="popup-text-content">Lorem ipsum.......</p>

 

3. Vložení scriptu pro funkčnost pop-upu. 

Přejděte do Design > Šablony, klikněte na Upravit XHTML > Hlavní šablona. Script vložte nad zavírací tag body </body> a uložte. Po uložení se dostanete opět do Editace kódu šablony, kde níže máte pole Název šablony - zde si do názvu zdejte například Jerry pop-up, a uložte.

sni--mek-obrazovky-2024-04-18-v--13.21.20.png

 

Script pro vložení:

<script>
  function hide() {
     document.getElementById('myPopup').style.display = 'none';
  }
</script>

 

4. Nyní je potřeba pop-up nastylovat, tak aby se zobrazoval správně. 

Přejděte do Design > Šablony a klikněte na Upravit CSS. Styly vložte klidně někam na začátek, například pod body a uložte.

sni--mek-obrazovky-2024-04-18-v--13.30.11.png

 

CSS pro vložení:

/* POP-UP */
.popup-inner {
    position: fixed;
    width: 90%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    padding: 1em;
    z-index: 9999;
    -webkit-box-shadow: 0px 0px 32px -7px rgba(0,0,0,0.33);
    -moz-box-shadow: 0px 0px 32px -7px rgba(0,0,0,0.33);
    box-shadow: 0px 0px 32px -7px rgba(0,0,0,0.33);
}
@media(min-width: 1200px) {
   .popup-inner {
      width: auto;
   }
}
.popup-inner .close-button {
    position: relative;
    text-align: right;
    position: relative;
    display: block;
}
.popup-inner .popup-button {
    text-align: right;
    position: absolute;
    top: 0;
    right: 0;
    color: #000;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 10px 20px 10px;
    text-decoration: none;
    border: none;
    background-color: transparent;
}
.popup-inner .popup-button:after {
    content: ' \2715';
    font-family: inherit;
    font-weight: 500;
    font-size: 1.5rem;
    color: #000;
    display: block;
}
.popup-inner .close-button .btn-x {
    display: none;
}
.popup-inner .popup-text {
    text-align: left;
    padding: 1em;
}
@media(min-width: 768px) {
   .popup-inner .popup-text {
      padding: 3em;
   }
}
.popup-inner .popup-text a {
    background-color: #000;
    color: #fff;
    padding: 0.7em 1em;
    font-size: 1rem;
    text-transform: uppercase;
    margin: 1em 0 0;
    display: inline-block;
    text-decoration: none;
}
.popup-inner .popup-text p {
    margin-bottom: 0;
    line-height: 1.6;
}
.popup-inner .popup-text-content-title {
    font-size: 1.1rem;
    padding: 0 0 0.5em;
}
.popup-inner .popup-text-content {
    padding: 0 0 0.3em;
}
/* POP-UP END */ 
 
Vyskakovací okno nebo-li pop-up je hotové. Přejděte do prohlížeče, aktualizujte si svoji webovou stránku. Vložený pop-up se zobrazí na úvodní straně vašeho webu.
sni--mek-obrazovky-2024-04-18-v--13.38.47.png
 
* Vložením HTML kódu do úvodní stránky dosáhneme toho, že pop-up je zobrazí pouze na hlavní stránce webu. Pokud bychom HTML kód vložili do Hlavní šablony pop-up by se zobrazoval na všech stránkách webu.

Podívejte se na náš video tutoriál: Pop-up okno