<!-- 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 -->

/* 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
}