Vytvoření vlastního okna

Základní kostra a struktura oken v HTML

Vynechání této struktury dojde k zobrazení kampaně, ale řada pokročilých vlastností Mailocatoru (validace formuláře, preloadery, odhalení překlepů a jiných) bude nedostupná.

Toto je základní struktura okna, kde jsou použity povinné tagy pro řízení obsahu pozorování okna na stránce.

<ml-object class="tpx-[fullscreen|sticky] tpx-[vertical]-[horizontal]"> 
	<ml-main style="width:500px; height:auto">
		<ml-close></ml-close>    
	</ml-main>          
</ml-object> 

Fullscreen

• třída tpx-fullscreen
• element s (průhledným) pozadím přes celou obrzovaku
• obsah stránky je 100% překrytý

Sticky

• třída tpx-sticky
• samostatný element přilepený na defionvané místo na stránce
• ostatní obsah stránky je dostupný, lze klikat na odkazy atd.

Pozicování

.tpx-t-l .tpx-t-c .tpx-t-r 
.tpx-m-l .tpx-m-c .tpx-m-r
.tpx-b-l .tpx-b-c .tpx-b-r   

Hlášky

Chybové hlášky

Vypisují se do kontejneru s třídou .mlctr-message-error

Obsah pro poděkování

Vypíše po úspěšném volání akce subscribe do .mlctr-message-success

Pokud není tato třída použita, poděkování nahradí obsah kontejneru ml-main

Obsah dalšího kroku

Vypíše po volání akce next do .mlctr-next-step

Pokud není tato třída použita, obsah kroku nahradí obsah kontejneru ml-main

Příklad celého okna:

<ml-object class="tpx-fullscreen tpx-m-c"> 
   <ml-main style="width:500px; height:auto" class="mailocator-default">
      <ml-close></ml-close>                
      <div class="mlctr-next-step mlctr-message-success">

         <h2>Subscribe Now!</h2>
         <input type="email" name="email" value="" placeholder="you@example.tld">
         <div class="mlctr-message-error"></div>
         <button onclick="mailocator.do('subscribe')">Subscribe</button>
         
      </div>					
   </ml-main>          
</ml-object>