Invitation box

by matmat

HTML

<div id="invitationbox" class="formbox">
    <div class="iconebox">
        <img src="http://www.fniktank.netai.net/Images/Icones/invit.png" class="h40 w40" />
    </div>
    <div class="statutitle h40">
        <div class="wrappertitle1">
            <div class="helper"></div>
            <div class="titlestabox1">( Inviter un ami )</div>
        </div><div class="wrappertitle2">
            <div class="helper"></div>
            <div class="titlestabox2">
                <img src="http://www.junkst.com/Images/Icones/close.png" alt="Junkst" title="Junkst" />
            </div>
        </div>
    </div>
    <form method="Post" action="#" id="submitstatutform" name="submitstatutform">
    
        <p class="jqformboxinput">
            <textarea name="invitMESSAGE" id="invitMESSAGE" rows=2 COLS=45></textarea>
            <label class="h30 lh30">Message:</label>
        </p>
        <p class="jqformboxinput">
            <input type="mail" name="invitMAIL" name="invitMAIL" placeholder="[email protected]" size="95" />
            <label class="h30 lh30" style="">mail:</label>
        </p>
        <!-- <p> <input type="file" name="nom" value="Joindre une image"/></p> -->
        <p style="text-align:center;">
        <button type="submit" name="btninvit" id="btninvit" value="Envoyer" onclick="closeformbox('statutbox')" >Inviter !</button>
		<input type="hidden" name="action" value="" id="actionform"  />
            <!-- <button type="button" name="cancel" value="Annuler" onclick="closeformbox('statutbox')">Annuler</button>-->
        </p>
    </form>
</div>

CSS

.h60 {
    height:60px;
}
.lh60 {
    line-height:60px;
}
.w60 {
    width:60px;
}
.h50 {
    height:50px;
}
.lh50 {
    line-height:50px;
}
.w50 {
    width:50px;
}
.h40 {
    height:40px;
}
.lh40 {
    line-height:40px;
}
.w40 {
    width:40px;
}
.h30 {
    height:30px;
}
.lh30 {
    line-height:30px;
}
.w30 {
    width:30px;
}
.helper {
    display:inline-block;
    vertical-align:middle;
    /* hauteur de la fenêtre, par rapport à laquelle les éléments vont être alignés */
    height:100%;
}
.titlestabox1, .titlestabox2 {
    /* on permet à ces éléments de s'aligner verticalement */
    display:inline-block;
    vertical-align:middle;
}
.titlestabox2 {
    /* des dimensions au hasard */
    height:50%;
    right:0;
    /* on le rend visible */
}
.titlestabox2 img {
    height:100%;
}
.statutitle {
    /* hauteur de la fenêtre, par rapport à laquelle les éléments vont être alignés */
    background:gainsboro;
    box-sizing:border-box;
    color:grey;
    font-family:Georgia, sherif;
    font-size:1.1rem;
}
.wrappertitle1 {
    width:93%;
    padding-left:7.5%;
    height:100%;
    display:inline-block;
    vertical-align:middle;
    box-sizing:border-box;
    text-align:center;
}
.wrappertitle2 {
    width:7%;
    height:100%;
    display:inline-block;
    vertical-align:middle;
    box-sizing:border-box;
    cursor:pointer;
}
.wrappertitle2:hover img {
    opacity:1;
}
.wrappertitle2 img {
    opacity:0.6;
}
#shadowing {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    /*background-color: #F7F7FF;*/
    background-color: grey;
    z-index:10;
    opacity:0.8;
    filter: alpha(opacity=80);
}
.gpstatut {
    background:gainsboro;
    margin:auto;
    margin-top:2%;
    text-align:left;
    width:90%;
}
.gpstatut1 {
    display:inline-block;
    vertical-align:middle;
    box-sizing:border-box;
    width:40%;
    margin-left:2%;
    color:#FF7000;
}
.gpstatut2 {
    display:inline-block;
    vertical-align:middle;
   ...

JavaScript

$(document.body).on('mouseenter', '.jqformboxinput', function (e) {
    e.stopPropagation();
    $(this).children('label').toggle();

});
$(document.body).on('mouseleave', '.jqformboxinput', function () {
    $(this).children('label').toggle();
});