Mailocator
menu

1. srpen 2020

Jak nakódovat vlastní pop-up na míru?

V Mailocatoru můžete používat vlastní HTML/CSS kód tak, aby bylo možné postavit pop-up (nebo jakýkoli objekt) bez omezení a na míru.

 
Pro vytvoření pop-upu můžete využít následující minimální kostru, která obsahuje základní sémantiku objektů používaných v Mailocatoru. Tento postup lze použít pro aktuální PROAGENCY verzi nebo původní verzi Mailocatoru.

Vzorový pop-up včetně poděkování a chybových hlášek si můžete stáhnout a vyzkoušet v Mailocator Designeru.


Základní povinná HTML struktura pop-upu

<main class="mlctr-underlayer">
     <div class="mlctr-popup">
          <img src="https://static.mailocator.com/img/icon/close.png" class="mlctr-close-button"
               onclick="return mailocator.action.do('close')">

              <div class="mlctr-message-success mlctr-next-step">
                  <form onsubmit="return mailocator.action.do('subscribe')">
                      <input type="email" name="email" value="" placeholder="your email">
                      <div class="mlctr-message-error" data-edit="mark text"></div>
                      <button >Subscribe</button>
                 </form>
             </div>

     </div>
</main>



Popis povinné struktury

Tag MAIN a element s třídou .mlctr-popup vyznačují základní kontejnery pro překrytí obrazovky poloprůhledným pozadím a umístění obsahu okna.
Pokud chcete mít v rohu okna zavírací křížek, obrázek nebo libovolně umístěné tlačítko, je třeba přidat akci Mailocatoru mailocator.action.do('close') , která vynutí zavření okna.
Pro odeslání formuláře použijte event javascriptu onsubmit a akci Mailocatoru mailocator.action.do('subscribe')
Obsah elementu s třídou .mlctr-message-success je přepsaný poděkováním v případě, že došlo k úspěšnému předání sebraných dat.
Obsah elementu s třídou .mlctr-message-error je naplněný chybovou hláškou v případě, že došlo k nějaké chybě (duplicitní kontakt atd.)
Pokud používáte více kroků (multistep), pak jsou jednotlivé kroky zobrazené v kontejneru s třídou .mlctr-next-step



Doporučené minimální CSS

.mlctr-underlayer {
   position: fixed;
   z-index: 9999999;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   background-color:rgba(0, 0, 0, 0.65)";
}

.mlctr-popup {
   width: 500px;
   height: 400px;
   background-color: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
}
 
.mlctr-close-button {
   position:absolute;
   width: 28px;
   height: 28px;
   right: -14px;
   top: -14px;
   z-index: 9999999
}




nastavení pozadí .mlctr-underlayer
výchozí nastavení okna .mlctr-popup
pozice zavíracího křížku .mlctr-close-button





Ke stažení:

Funkční Mailocator package si můžete stáhnout zde - Popup basic skeleton.mlctr

POMOHL VÁM TENTO ČLÁNEK?

  

Společnost Mailnatives, s.r.o. s IČO 07891768 je vedená u Krajského soudu v Hradci Králové pod spisovou značkou C 43368