modifSAAPBOX

by matmat

HTML

<div id="modifboxSAAP">

        <div class="contenuMODSAAP">
            <div class="ModifierObjet">( modifier mon annonce )<span id="closemodifSAAP">X</span></div>
            <form>
                <div class="FormulaireAjouter" id="FormulaireAjouter">
                    <div class="ligneSAGA1AJ">
                        <div class="ligneSAGA1AJ-1">
                            <p>
                                <label>Titre</label>
                                <input type="text" class="formulaire" maxlength="24" id="intituleMODSAAP" />
                            </p>
                        </div>
                        <div class="ligneSAGA1AJ-2">
                            <p>
                                <select id="categorieMODSAAP">
                                    <option>-- Catégorie --</option>
                                </select>
                            </p>
                            <p>
                                <select id="souscategorieMODSAAP" disabled="true">
                                    <option>-- Sous-Catégorie --</option>
                                </select>
                            </p>
                        </div>
                        <div class="ligneSAGAAJ1-main">
                            <div class="ligneSAGAAJ1-main-1">
                                <label>Prix</label>
                                <input maxlength="10" id="prixMODSAAP"/>
                                <select id="deviseMODSAAP" style="width:50px; ">
                                    <option value="1">€</option>
                                    <option value="2">CHF</option>
                                </select>
                            </div>
                            <div class="ligneSAGAAJ1-main-1">
                                <select id="livraisonMODSAAP">
                                    <option value="1">A retirer sur place</option>
                                    <option...

CSS

#modifboxSAAP {
  padding:10px;
  width:535px; 
position: absolute;
top: 10%;
left: 50%;
z-index: 11;
}

.ModifierObjet {
    width:533px;
    height:30px;
    line-height:30px;
    text-align:center;
    border:1px solid grey;
    vertical-align:middle;
    margin-left:auto;
    border-bottom:1px solid grey;
    box-shadow:1px 1px 5px grey;
    font-family: palatino;
font-size: 14px;
border: 1px solid #DCDCDC;
letter-spacing: 1.5px;
font-weight: bold;
color: #808080;
background-color: #DCDCDC;
}
.ModifierObjet span{
    float:right;
margin-right:15px;
display:inline-block;   
    width:20px;
    height:20px;
        cursor:pointer;
    border:1px solid grey;
    line-height:20px;
    vertical-align:middle;
    margin-top:5px;
}
.ModifierObjet span:hover{
    color:white;
    border:1px dashed white;
}

.contenuMODSAAP {
    vertical-align: middle;
    display: inline-block;
    margin-top:10px;
    margin-bottom:20px;
    width:100%;
    margin-right:auto;
    margin-left:-50%;
    overflow:hidden;
    min-height :300px;
    background-color:#F7F7FF;
    border:1px solid #F5E6E6;
    padding-bottom:30px;
    box-shadow: 1px 1px 3px #808080;
}




.FormulaireAjouter {
    width:99%;
    margin-top:10px;
}

.ligneSAGA1AJ p {
    width:100%;
}
.FormulaireAjouter select {
    font-family:Calibri;
    font-style:italic;
    border:solid 1px #F5F5FF;
    padding-left:4px;
    width:140px;
    font-size:14px;
    color:grey;
    margin:0;
    height:20px;
}
.ligneSAGA1AJ-1 input {
    width:220px;
    font-style: italic;
    font-size:16px;
    margin-left:10px;
    line-height:20px;
    margin-bottom:0px;
    padding-left:10px;
    color:#990000;
    font-weight:bold;
    font-family: Constantia, Palatino, serif;
    border: 1px solid gainsboro;
    padding: 4px 4px 4px 4px;
}
.ligneSAGA1AJ-1 input:hover {
    border:solid 1px #AAAAAA;
    color:#FF7000;
}
.ligneSAGA1AJ-1 input:active {
    color:#FF7000;
}
.ligneSAGA1AJ-1 label {
   ...

JavaScript

$(document).ready(function (m) {
     $(document.body).on('click', '#closemodifSAAP', function (event) {

         $('#modifboxSAAP').toggle('fast');

     });
 });