Logre hacerlo antes...
pero ahora tengo un nuevo problema
este es el codigo que tengo
jquery
$(document).ready(function(){
$('.btn_mi-cuenta').click(function(e){
e.stopPropagation();
$('#conten_mi-cuenta').fadeIn();
});
$('body').click(function(e) {
if (e.target.id !== "conten_mi-cuenta") {
$('#conten_mi-cuenta').fadeOut();
};
});
});
html
<div id="conten_mi-cuenta">
<div class="in-header">
<span>Iniciar Sección</span>
</div>
<div class="transparent-in"></div>
<form class="form_iniciar-seccion">
<input type="text" class="in-campo" placeholder="Correo">
<input type="password" class="in-campo" placeholder="Clave">
<input type="submit" class="in-enviar" value="Iniciar Sección">
</form>
</div>
css
#conten_mi-cuenta{
display: none;
position: fixed;
z-index: 1000;
width: 251px;
top: 5em;
left: 19em;
}
.in-header{
background: #a8c741;
width: 100%;
padding: 10px 5px;
text-align: center;
border-radius: 2px 2px 0 0;
color: #152232;
}
.in-header span{
background: url('../img/in-arrow.png') center 33px no-repeat;
padding-top: 53px;
}
.transparent-in{
position: absolute;
width: 100%;
height: 145px;
background: rgba(218, 223, 227, 0.92);
padding: 5px;
border-radius: 0 0 2px 2px;
}
.form_iniciar-seccion{
position: absolute;
z-index: 2000;
}
.in-campo{
width: 221px;
height: 30px;
position: relative;
left: 20px;
margin-top: 10px;
padding: 2px;
color: #152232;
border:0px;
border-radius: 2px;
}
.in-enviar{
background: #152232;
border: 0px;
color: white;
margin-left: 20px;
cursor: pointer;
height: 39px;
width: 226px;
margin-top: 10px;
border-radius: 2px;
}
el problema ahora es que cuando le doy a uno de los elementos que esta adentro de "conten_mi-cuenta" se desaparece y no lo quiero asi. Quiero que al cliquear en cualquier elemento hijo no desaparezca. Solo lo haga al cliquear afuera