statutbox

by matmat

HTML

<div id="statutbox" class="formbox">
    <div class="iconebox">
        <img src="http://www.fniktank.netai.net/Images/Icones/feed.png" class="h40 w40" />
    </div>
<div class="statutitle h40">
    <div class="wrappertitle1">
        <div class="helper"></div>
        <div class="titlestabox1">( Publier un statut )</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">
    <div class="gpstatut h40 lh40"><div class="gpstatut1">Afficher pour le groupe:</div>
        <div class="gpstatut2">
        <select name="GROUPE" id="ajoutSTATUTgroupe" class="SELECTGROUPE" style="">
            <option value="00" <?php if(!$groupe){echo 'selected';}?>> - Tous mes contacts</option>
            <?php if (!empty($listegroupe)){ foreach($listegroupe as $group){ ?>
            <option value="<?php echo $group['G_ID'];?>">
                <?php echo $group[ 'GRO_NAME'];?>
            </option>
            <?php } } ?>
        </select></div>
    </div>
   
    <p  class="jqformboxinput">
        <textarea name="STATUT" id="ajoutSTATUTcomment" rows=2 COLS=45 ></textarea> <label class="h30 lh30">Publication:</label>
    </p>

    <p  class="jqformboxinput">
        <input type="text" name="ajoutSTATUTlien" placeholder="http:\\" size="95" />    <label class="h30 lh30" style="">lien:</label>
    </p>
    <!-- <p> <input type="file" name="nom" value="Joindre une image"/></p> -->
    <p style="text-align:center;">
        <button type="submit" name="btnsubmitstatut" id="btnsubmitstatut" value="Envoyer" onclick="closeformbox('statutbox')">Publier !</button>
        <input type="hidden" name="action" value="" id="actionform" />
        <!-- <button type="button" name="cancel" value="Annuler"...

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;
   ...

JavaScript

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