So far I have managed to open the window of each plan with its button and to close it if I select another button or by clicking the window that was opened. What I can't implement is that it closes when I click outside the window...
and another error that cannot be solved is that the window opens in the upper part of the body and not in the place where the button that is selected is located...
I pass the code so you can see what I have armed. Thank you
/*--mostrar y ocultar ventana planes--*/
function ventana(elemento) {
$(elemento).next('div').toggle();
$(".ventanas").not($(elemento).next('div')).hide();
$(document.body).one('click', close);
}
function close() {
$('.ventanas').next('.openClose').hide();
$('.ventanas').removeClass('open');
}/*--espacio para planes--*/
section#plan {
width: 100%;
display: block;
position: relative;
margin-top: 0;
margin-bottom: 130px;
/*--130px de 80px cuando esconde footer--*/
}
/*--titulos de cada plan--*/
section#plan #plan1>h3 {
color: #EC2894;
}
section#plan #plan1>a {
background: #EC2894;
}
section#plan #plan2>h3 {
color: #0199f5;
}
section#plan #plan2>a {
background: #0199f5;
}
section#plan #plan3>h3 {
color: #b5de0a;
}
section#plan #plan3>a {
background: #b5de0a;
}
/*--boton "DESDE $.."--*/
section#plan .ampliar a.desde {
color: #fff;
position: relative;
display: block;
text-decoration: none;
border-radius: 5px;
margin-bottom: 35px;
width: 80%;
margin: auto;
text-align: center;
padding: 5px 0;
font-size: .8em;
}
section#plan .ampliar a.desde:hover {
color: #000;
}
section#plan .ampliar a.desde p:first-child {
font-size: 1.2rem;
font-weight: 600;
}
/*--tarjeta con detalles--*/
section#plan .ampliar .ventanas>* {
margin-bottom: 5px;
}
section#plan .ampliar .ventanas {
display: none;
z-index: 2100;
width: 100%;
position: fixed;
top: 60px;
background: #fff;
border-radius: 5px;
width: 78%;
max-height: 65vh;
left: 11%;
overflow: auto;
box-shadow: 5px 5px 5px grey;
padding: 10px;
font-size: .7rem;
color: #333;
text-align: justify;
}
section#plan .ampliar .ventanas.mostrar {
display: block;
}
/*--titulos planes--*/
section#plan .ampliar .ventanas h3 {
color: #0199f5;
font-size: .9em;
padding-top: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<section id="plan">
<div id="plan1" class="ampliar">
<h3>PLAN PRIMER VENTANA</h3>
<a href="#" id="detalles1" class="desde" onClick="ventana(this)">
<p>DESDE $??? POR MES*</p>
<p>Clickea para mas detalles</p>
</a>
<div id="ventana1" class="ventanas" onClick="ventana(this)">
<div id="info">
<h4>VENTANA 1 Te brindamos dos para que elijas la que mejor se adapta a tus necesidades:</h4>
<h3>PAGOS MENSUALIZADOS</h3>
<p>El pago de tu web lo podrás realizar mensualizado o trimestral, según tu conveniencia! y dependiendo la complejidad del armado de tu página, o si necesitás que realicemos cambios en las promociones o contenidos con regularidad</p>
</div>
</div>
</div>
<div id="plan2" class="ampliar">
<h3>PLAN CREZCAMOS</h3>
<a href="#" id="detalles2" class="desde" onClick="ventana(this)">
<p>DESDE $??? POR MES*</p>
<p>Clickea para mas detalles</p>
</a>
<div id="ventana2" class="ventanas" onClick="ventana(this)">
<h4>VENTANA 2 Te brindamos dos para que elijas la que mejor se adapta a tus necesidades:</h4>
<h3>PAGOS MENSUALIZADOS</h3>
<p>El pago de tu web lo podrás realizar mensualizado o trimestral, según tu conveniencia! y dependiendo la complejidad del armado de tu página, o si necesitás que realicemos cambios en las promociones o contenidos con regularidad</p>
</div>
</div>
<div id="plan3" class="ampliar">
<h3>PLAN CREZCAMOS</h3>
<a href="#" id="detalles3" class="desde" onClick="ventana(this)">
<p>DESDE $??? POR MES*</p>
<p>Clickea para mas detalles</p>
</a>
<div id="ventana3" class="ventanas" onClick="ventana(this)">
<h4>VENTANA 3 Te brindamos dos para que elijas la que mejor se adapta a tus necesidades:</h4>
<h3>PAGOS MENSUALIZADOS</h3>
<p>El pago de tu web lo podrás realizar mensualizado o trimestral, según tu conveniencia! y dependiendo la complejidad del armado de tu página, o si necesitás que realicemos cambios en las promociones o contenidos con regularidad</p>
</div>
</div>
</section>
</body>
I think I have it, first, to prevent the click from scrolling up, I've put e.preventDefault on the clicks to prevent the events from propagating. In this way the action you want is performed and the rest are discarded.
On the other hand, for the position of the window, I have put a calc(50% - 80px) as top and thus it is placed in the center, although this will depend on the height of the open window, you can calculate this with javascript if each window is different.
Now, I have changed the events for the jQuery classics since it is more comfortable for me and I have done a trick so that when the window is opened, a div is also opened occupying the entire width of the screen to which I have placed another click event to close the windows. It's a trick that I find more efficient than handling events on body or *. The .from divs go above and beyond thanks to the z-index.
Logically, when the window opens I make the .background visible. You can put a transparent white background on this one, which I think will look good, and then play with the z-indexes to hide the rest of the divs, although then you lose the functionality of opening another one without closing the previous one.