Vložení vlastního kódu
Ukázka HTML kódu pop-upu
Modře vyznačené deklarace a názvy elementů jsou povinné.
<!-- transparent fullscreen background -->
<div class="my-popup-background-layer">
<!-- master popup div container -->
<div class="my-popup-container mlctr-popup">
<!-- following onsubmit event is required -->
<form onsubmit="return mailocator.action.do('subscribe')">
<h1>This is the popup... </h1>
<!-- following div will be overwritten with success message -->
<div class="mlctr-message-success">
<!-- overwrite following content on success -->
<div class="mlctr-message-error"><!-- display error messages here --></div>
<label>Your e-mail address</label>
<!-- input with attribute name="email" is required -->
<input type="text" name="email" value="" placeholder="someone@somewhere.net" />
<input type="submit" value="Subscribe" />
<!-- following event closes popup by users action -->
<input type="button" value="Close" onclick="mailocator.action.do('close')" />
</div>
</form>
</div><!--/end of my-popup-container -->
</div><!--/end of my-popup-background-layer -->
<div class="my-popup-background-layer">
<!-- master popup div container -->
<div class="my-popup-container mlctr-popup">
<!-- following onsubmit event is required -->
<form onsubmit="return mailocator.action.do('subscribe')">
<h1>This is the popup... </h1>
<!-- following div will be overwritten with success message -->
<div class="mlctr-message-success">
<!-- overwrite following content on success -->
<div class="mlctr-message-error"><!-- display error messages here --></div>
<label>Your e-mail address</label>
<!-- input with attribute name="email" is required -->
<input type="text" name="email" value="" placeholder="someone@somewhere.net" />
<input type="submit" value="Subscribe" />
<!-- following event closes popup by users action -->
<input type="button" value="Close" onclick="mailocator.action.do('close')" />
</div>
</form>
</div><!--/end of my-popup-container -->
</div><!--/end of my-popup-background-layer -->
Ukázka CSS kódu pro vlastní design pop-upu:
Modře označené deklarace jsou doporučené, ostatní stylopis se odvíjí od požadovaného vzhledu./* transparent fullscreen background */
.my-popup-background-layer {
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5); font-size: 100%; font-family: sans-serif;
}
/* master popup div container */
.my-popup-container {
max-width: 400px;
margin: 50px auto 0 auto;
background: #fff;
border-radius: 8px;
box-shadow:1px 1px 12px #5c5c5c
}
.my-popup-background-layer {
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5); font-size: 100%; font-family: sans-serif;
}
/* master popup div container */
.my-popup-container {
max-width: 400px;
margin: 50px auto 0 auto;
background: #fff;
border-radius: 8px;
box-shadow:1px 1px 12px #5c5c5c
}