Message box

by matmat

HTML

<div id="msg" class="messagebox">
    <div class="messagewrapper">
        
        <div class="messagetitle h40 lh40"><span id="msgheader">Message</span><span id="resultatenvoi" style="color:#F5E6E6"> </span><span id="closemsgbox">[x]</span>

        </div>
        <form method="Post" action="#" id="submitmsgform" name="submitmsgform">
            <div class="meassagea"><span>A:</span>

                <input type="text" id="msgto" disabled />
            </div>
            <div class="meassagea"><span>Objet:</span>

                <input type="text" id="msgobj" />
            </div>
            <textarea id="msgmes" class="h60"></textarea>
            <div class="messagefooter">
                <button type="submit" name="btnsubmitmsg" id="btnsubmitmsg" value="Envoyer" onclick="closeformbox('statutbox')" data-membrefrom="" data-membreto="">Envoi</button>
            </div>
        </form>
    </div>
</div>

CSS

.h30 {
  height:30px;
}
.lh30 {
  line-height:30px;
}

.h40 {
  height:40px;
}
.lh40 {
 line-height:40px;
}

.messagebox {
    z-index: 1;
    position: fixed!important;
    bottom:5%;
    left: 50%;
  
}
.messagewrapper {
    position:relative;
    left:-50%;
    text-align: center;
    width: 400px;
    background-color:#F7F7FF!important;
    /*    F5E6E6*/
    -moz-box-shadow: 0px 0px 10px 0px #938A8A;
    -webkit-box-shadow: 0px 0px 10px 0px #938A8A;
    -o-box-shadow: 0px 0px 10px 0px #938A8A;
    box-shadow: 0px 0px 10px 0px #938A8A;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#990000, Direction=NaN, Strength=10);

    border: solid 2px #938A8A;
    font-family: 'Georgia', "lucida sans";
    font-size:1rem;
}
.messagetitle1 {
   
    vertical-align:middle;
    background-color:#938A8A;
    text-align:center;
    color:#F5E6E6;
    display
}
.messagetitle{ 
     display:table;
width:100%;
    background-color:#990000;
    text-align:center;
    color:whitesmoke;
    font-family:Georgia;
    font-size:1.2rem;
    font-family:'century gothic';
    margin-bottom:2%;
}
.messagetitle>span{
    display:table-cell;
} 
.meassagea {
    padding-left:2%;
    width:100%;
    background-color:#white;
    text-align:left;
    color:black;
    font-family:'century gothic';
    font-size:0.9rem;
}
.meassagea input {
    border-top:none;
    border-bottom:none;
    border-right:none;
    margin-left:2%;
    width:75%;
    vertical-align:middle;
    text-indent:10px;
    border-left:1px solid #938A8A;
    font-family: calibri, "lucida sans";
    font-style:0.rem;
    color:grey;
}
.meassagea input:focus {
    border-top:none;
    border-bottom:none;
    border-right:none;
    vertical-align:middle;
}
.meassagea span {
    width:10%;
    display: inline-block;
}
.messagebox textarea {
    border:1px solid #938A8A;
    font-size:0.9rem;
    font-family: Constantia, Palatino, serif;
    color:grey;
    height:60px;
    margin-left:auto;
    margin-top:4%;
   ...

JavaScript

$(document.body).on('click','#closemsgbox',function(e) {
   $('#msg').fadeOut();
    e.preventdefault();
    return false;
    
});