Createbox

by matmat

HTML

<div id="annoncebrocantebox" class="formbox">
    <div class="iconebox">
        <img src="http://www.junkst.com/Images/Icones/SAAP.png" class="h40 w40" />
    </div>
    <div class="statutitle h40">
        <div class="wrappertitle1">
            <div class="helper"></div>
            <div class="titlestabox1">( Créer une annonce )</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>
    <div class="cmtitle">
        <p>
            <label>Titre</label>
            <input type="text" class="formulaire" required="required" maxlength="24" id="intituleAJ" placeholder="Nom du produit" />
        </p>
    </div>
    <div class="tableselect">
        <p class="">
            <select id="categorieAJ" data-app="SAAP">
                <option value='00'>-- Catégorie --</option>
                <?php /*$sqlcat="SELECT * FROM CATEGORIE" ; $scg=$ pdo->prepare($sqlcat); $scg->execute(); $scgrow_count = $scg->rowCount(); while( $rowscg = $scg->fetch(PDO::FETCH_BOTH))*/ foreach($tabcat1 as $cat) { ?>
                <option value="<?php echo $cat['CAT_ID'];?>">
                    <?php echo $cat[ 'CAT_CATEGORIE'];?>
                </option>
                <?php } ?>
            </select>
        </p>
        <p>
            <select id="souscategorieAJ" disabled="true" data-app="SAAP">
                <option value='00'>-- Sous-Catégorie --</option>
            </select>
        </p>
    </div>
    <div class="cmprice">
        <p>
        <label>Prix</label>
        <input maxlength="10" id="prixAJ" placeholder="9999" />
        <select id="deviseAJ" style=" ">
            <option value="1">€</option>
            <option value="2">CHF</option>
        </select>
        </p>
    </div>
    <div class="cmwhere">
        <p>
     	<label>CP</label>
          ...

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;
}
.h20 {
    height:20px;
}
.lh20 {
    line-height:20px;
}
.w20 {
    width:20px;
}
.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%;
   ...

JavaScript

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

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