Вопросы Теги

как закрытие окна для clickear вне элемента

до настоящего времени я добился, чтобы открылось окно каждого плана с Вашей кнопкой, и чтобы он закрыл для себя, если я выбираю другую кнопку или 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>
1
задан 11.03.2019, 04:10
1 ответ

Я думаю, что это у меня есть, сначала, чтобы предотвращать, что, кликнув, он был сделан 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>
2
ответ дан 19.11.2019, 22:20
  • 1
    эффектный! я остаюсь fantá stico тысячи спасибо! –  Fernanda 11.03.2019, 05:01
  • 2
    perdó n, есть fallito, в событии click .ventanas и .desde, я делаю шоу background и следовательно, он появляется tambié n, когда закрывается окно, у него нет следствий, потому что .desde está n сверху с z-index, но считай создавать события .ventanas и .desde по отдельности снимая шоу .ventanas в .background. –  track3r 11.03.2019, 05:07
  • 3
    ok, спасибо за correcció n и твой interé s –  Fernanda 11.03.2019, 05:11