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í PRO a AGENCY 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
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
TagMAIN
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