Home / Questions / 244636
Accepted
Fernanda
Asked: 2020-03-12 04:10:22 +0800 CST 2020-03-12 04:10:22 +0800 CST

单击元素外部时如何关闭窗口

  • 772

到目前为止，我已经设法使用其按钮打开每个计划的窗口，并在我选择另一个按钮或单击打开的窗口时关闭它。我无法实现的是，当我在窗口外单击时它会关闭......

另一个无法解决的错误是窗口在主体的上部打开，而不是在所选按钮所在的位置...

我传递了代码，这样你就可以看到我装备了什么。谢谢

/*--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>

javascript

1 Answers

  1. Best Answer

    我想我有它，首先，为了防止点击向上滚动，我将 e.preventDefault 放在点击上以防止事件传播。这样，你想要的动作被执行，其余的被丢弃。

    另一方面，对于窗口的位置，我将 calc(50% - 80px) 放在顶部，因此它被放置在中心，虽然这将取决于打开窗口的高度，你可以计算这个如果每个窗口都不同，则使用 javascript。

    现在，我已经更改了 jQuery 经典的事件，因为它对我来说更舒服，并且我做了一个技巧，这样当窗口打开时，一个 div 也会打开，占据我放置另一个的屏幕的整个宽度点击事件关闭窗口。我发现这是一个比在 body 或 *. 多亏了 z-index，.from 的 div 超越了一切。

    从逻辑上讲，当窗口打开时，我使 .background 可见。您可以在这个上放置一个透明的白色背景，我认为这会很好看，然后使用 z-indexes 来隐藏其余的 div，尽管这样您就失去了在不关闭前一个的情况下打开另一个的功能。

    $(".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