до настоящего времени я добился, чтобы открылось окно каждого плана с Вашей кнопкой, и чтобы он закрыл для себя, если я выбираю другую кнопку или clickeando окно, которое открылось. То, что мне не удается осуществить, состоит в том, чтобы он закрылся, когда я кликаю вне окна...
и другая ошибка, которой не решать состоит в том, что окно открывается в верхней части body и не в месте, где находится кнопка, которая выбирается...
я перемещаю код для того, чтобы они увидели то, что я считаю вооруженным. спасибо
/*--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>
Я думаю, что это у меня есть, сначала, чтобы предотвращать, что, кликнув, он был сделан scroll наверху, поместил e.preventDefault в clicks, чтобы предотвращать, что события propagen. Таким образом, реализуют ее acciГіn, который ты желаешь, и оставшаяся часть они отказываются.
С другой стороны, для нее posiciГіn окна, я поместил, как top calc (50 % - 80px) и asГ - он помещается в центре, хотя это dependerГЎ высоты открытого окна, ты можешь вычислять это с javascript, если каждое окно отличное.
Сейчас, я изменил события из-за них clГЎsicos jQuery, так как он я mГЎs cГіmodo, и я сделал прием для того, чтобы, когда откроется окно, открылся tambiГ©n div занимая всю ширину экрана, в которую я разместил другое событие click, чтобы закрывать окна. Это прием, что мне кажется mГЎs работоспособно, что контролировать события в body или *. divs .desde идут сверху благодаря z-index.
LГіgicamente, когда открывается окно, я делаю видимым .background. В Г©ste ты можешь помещать ему белый прозрачный фонд, который я создаю quedarГЎ хорошо и тогда, играть с z-index, чтобы прятать оставшуюся часть divs .desde, хотя тогда ты теряешь функциональность открытия другого, не закрывая предыдущего.
$(".background").on('click', function(e) {
e.preventDefault();
$(".ventanas").hide();
$(".background").hide();
});
$(".ventanas,.desde").on("click", function(e) {
e.preventDefault();
$($(this)).next('div').toggle();
$(".ventanas").not($($(this)).next('div')).hide();
$(".background").show();
});
.background {
position: fixed;
left: 0px;
top: 0px;
width: 100vw;
height: 100vh;
z-index:1
}
/*--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;
z-index:2;
}
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: calc(50% - 80px);
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>
<div class="background" style="display: none;"></div>
<section id="plan">
<div id="plan1" class="ampliar">
<h3>PLAN PRIMER VENTANA</h3>
<a href="#" id="detalles1" class="desde">
<p>DESDE $??? POR MES*</p>
<p>Clickea para mas detalles</p>
</a>
<div id="ventana1" class="ventanas">
<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">
<p>DESDE $??? POR MES*</p>
<p>Clickea para mas detalles</p>
</a>
<div id="ventana2" class="ventanas">
<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">
<p>DESDE $??? POR MES*</p>
<p>Clickea para mas detalles</p>
</a>
<div id="ventana3" class="ventanas">
<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>