2

Tengo mi formulario y dentro esta un boton, que invoca a una funcion, y esta funcion abre un pop-up, sin embargo el problema esta que debo clickear dos veces para que el evento funcione, aun cuando este boton tiene un parametro onclick.

El problema esta en el boton con el id "btnVentana" y lo mismo sucede con el pop-up que tiene otro boton de volver y sucede lo mismo tengo que clickear dos veces para que se esconda denuevo

<body>
  <header class="header-section">
    <a href="index.html" class="site-logo">
      <img src="img/logo_cupula.png" alt="">
    </a>
  </header>
  <section class="hero-section">
    <div class="container">
      <div class="row">
        <div class="col-lg-6">
          <div class="hs-text">
            <h4>Compra tu entrada para este MEGA EVENTO;
              rápido, sin fila, sin demoras, sin complicaciones</h4><br>
          </div>
        </div>
        <div class="col-lg-6 ">
          <form id="form" class="hero-form" method="post" action="datos.php">
            <p>Completa el Siguiente Formulario</p><br>
            <input id="nombre" type="text" name="nombre" placeholder="Nombres Completos" pattern="[a-zA-Z\s]{2,254}" required>
            <input id="edad" type="text" name="edad" placeholder="Edad" required pattern="([1-9])([8-9])|([2-9])([0-9])" maxlength="2">
            <input id="celular" type="tel" name="celular" placeholder="Numero whatsapp" pattern="[0-9]{9}" maxlength="9" required>
            <span class="titulo"> Zona:</span>
            <input class="radio" id="zona" type="radio" name="zona" value="GENERAL"><span>General</span>
            <input class="radio" id="zona" type="radio" name="zona" value="VIP"><span>VIP</span>
            <input class="radio" id="zona" type="radio" name="zona" value="BOX"><span>BOX</span><br>
            <span class="titulo">N° Entradas </span><select id="entrada" name="entrada">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
            </select> <br>
            <button id="btnVentana" class="site-btn" type="button" onclick="ventanaModal()"> PRECIO </button>
            <!--Haciendo el pop up -->
            <div id="ventana" class="ventana-body">
              <div class="col-12">
                <p>¿Como deseas pagar?</p>
              </div>
              <div class="col-7 imagen">
                <img class="popup" src="img/popup.png" alt="">
              </div>
              <div class="col-3 pago">
                <input class="radio" id="pago" type="radio" name="pago" value="EFECTIVO"> <span>Efectivo</span><br>
                <input class="radio" id="pago" type="radio" name="pago" value="PAY PAL"> <span>Pay Pal</span> <br>
                <input class="radio" id="pago" type="radio" name="pago" value="PAGO ELECTRONICO"> <span>Cuenta Bancaria</span> <br>
                <button class="site-btn" type="submit" name="button">Reservar</button>
                <button id="btnCerrar" class="site-btn" type="button" name="button" onclick="cerrarModal()">Atras</button>
              </div>
            </div>
        </div>
        </form>
      </div>
    </div>
    </div>        
    <script type="text/javascript">
      function ventanaModal() {
        var ventana = document.getElementById('ventana'),
          btnVentana = document.getElementById('btnVentana');
        btnVentana.addEventListener('click', function() {
          ventana.classList.add('active');
        });
      }
      function cerrarModal() {
        var ventana = document.getElementById('ventana'),
          btnCerrar = document.getElementById('btnCerrar');
        btnCerrar.addEventListener('click', function() {
          ventana.classList.remove('active');
        });
      }
    </script>
</body>

2 respuestas 2

4

Estas colocando un listener en la función y ahora debe ejecutarse dos veces, puedes corregirlo de esta forma considerando tu HTML inicial

<script type="text/javascript">
      var ventana = document.getElementById('ventana');
      function ventanaModal() {
          ventana.classList.add('active');
      }
      function cerrarModal() {
          ventana.classList.remove('active');
      }
</script>
0

Otra alternativa a la respuesta que propone Jonathan, es que utilices los modals de bootstrap aprovechando que ya lo tienes incorporado en tu código, sería algo como esto:

<body>
    <header class="header-section">
      <a href="index.html" class="site-logo">
        <img src="img/logo_cupula.png" alt="">
      </a>
    </header>
    <section class="hero-section">
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <div class="hs-text">
              <h4>Compra tu entrada para este MEGA EVENTO;
                rápido, sin fila, sin demoras, sin complicaciones</h4><br>
            </div>
          </div>
          <div class="col-lg-6 ">
            <form id="form" class="hero-form" method="post" action="datos.php">
              <p>Completa el Siguiente Formulario</p><br>
              <input id="nombre" type="text" name="nombre" placeholder="Nombres Completos" pattern="[a-zA-Z\s]{2,254}" required>
              <input id="edad" type="text" name="edad" placeholder="Edad" required pattern="([1-9])([8-9])|([2-9])([0-9])" maxlength="2">
              <input id="celular" type="tel" name="celular" placeholder="Numero whatsapp" pattern="[0-9]{9}" maxlength="9" required>
              <span class="titulo"> Zona:</span>
              <input class="radio" id="zona" type="radio" name="zona" value="GENERAL"><span>General</span>
              <input class="radio" id="zona" type="radio" name="zona" value="VIP"><span>VIP</span>
              <input class="radio" id="zona" type="radio" name="zona" value="BOX"><span>BOX</span><br>
              <span class="titulo">N° Entradas </span>
              <select id="entrada" name="entrada">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
              </select> <br>
              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ventana">PRECIO</button>

              <!--Haciendo el pop up -->
              <div class="modal fade" id="ventana" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-body">
                      <div class="col-12">
                        <p>¿Como deseas pagar?</p>
                      </div>
                      <div class="col-7 imagen">
                        <img class="popup" src="img/popup.png" alt="">
                      </div>
                      <div class="col-3 pago">
                        <input class="radio" id="pago" type="radio" name="pago" value="EFECTIVO"> <span>Efectivo</span><br>
                        <input class="radio" id="pago" type="radio" name="pago" value="PAY PAL"> <span>Pay Pal</span> <br>
                        <input class="radio" id="pago" type="radio" name="pago" value="PAGO ELECTRONICO"> <span>Cuenta Bancaria</span> <br>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button type="submit" class="btn btn-primary">Reservar</button>
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Atrás</button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>      
  </body>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.