I am trying to pop up a div with error messages. The markup is shown as
.popup
{
background: #7ABC45 none;
border: 1px solid #7ABC45; border-radius: 5px; -moz-border-radius:5px;
font-size: 8pt; font-weight:bold;
position: relative; bottom:4px; right:4px; z-index:2;
}
.popuptop{height:7px; text-align:right; padding:0px 4px 2px 0;z-index:1;}
.popup-message { text-align:left; padding:3px 3px 3px 3px;z-index:1; }
.popup-shadow {background-color:#ccc;position: relative; bottom:4px; right:4px; border-radius:5px;-moz-border-radius:5px;z-index:1;}
.popupContainer{position:relative;z-index:1;}
#emailErrorAlert{position:absolute;top:-40px; left:10px;}
#duplicateEmailAlert{position:absolute;top:-40px; left:10px;}
#duplicateMobileAlert{position:absolute;top:-40px; left:10px;}
<tr step="step1">
<td class="grid_4">
<span>My Mob No/Email is </span><a href="#" style="font-size:8pt; padding-left:20px;">we protect your privacy</a>
<div class="popupContainer">
<div id="emailErrorAlert" style="display:none;">
<div class="popup-shadow">
<div class="popup">
<div class="popuptop"><a href="#" class="closepopup">X</a></div>
<div class="popup-message"><p>Please Enter a Valid Email Or Mobile Phone Number</p></div>
</div>
</div>
</div>
</div>
<div class="popupContainer">
<div id="duplicateEmailAlert" style="display:none;">
<div class="popup-shadow">
<div class="popup">
<div class="popuptop"><a href="#" class="closepopup">X</a></div>
<div class="popup-message"><p>You may provide just one email address</p></div>
</div>
</div>
</div>
</div>
<div class="popupContainer">
<div id="duplicateMobileAlert" style="display:none;">
<div class="popup-shadow">
<div class="popup">
<div class="popuptop"><a href="#" class="closepopup">X</a></div>
<div class="popup-message"><p>You may provide just one mobile phone number</p></div>
</div>
</div>
</div>
</div>
</td>
</tr>
Divas should be located next to the field. I am trying to set the absolute position as shown in css above for #duplicateMobileAlert. The problem is that the div goes beyond tr. Therefore, if I change left: 10px left: -90px, most of the div disappears behind the container. I want him to go through tr and its container.
How can i do this? Any pointers?
source
share