0

Que tal amigos como puedo llamar una modal desde Javascript a un formulario que contiene un select y el cual el alert si me funciona, pero cuando selecciono la opcion nivel 1 que es ahí donde quiero llamar el modal pera ver el estacionamiento y elegir un cajón pero no me funciona.

Este es mi formulario tengo inputs y un select:

  <form name="form1">


 <input placeholder="Vehículo" type="text" id="vehiculo">

 <input placeholder="Placa" type="text" id="placa">

   <select name="niveles" id="niveles" class="select-4" onchange="visualizar();">

     <option value="n0">Seleccionar el nivel</option>

     <option value="n1">Nivel 1</option>

  </select>


 </form>

Este es mi modal el cual tiene como varios botones simulando un estacionamiento:

    <div class="contenedor-cajones">

        <header>Nivel 1</header>

        <label for="btn-modal">X</label>

        <div class="contenedor-cajon">

            <tr>
            <tr><button id="cajon1">Cajón 1</button></tr>
            <tr><button id="cajon2">Cajón 2</button></tr>
            <tr><button id="cajon3">Cajón 3</button></tr>
            <tr><button id="cajon4">Cajón 4</button></tr>
            <tr><button id="cajon5">Cajón 5</button></tr>
            </tr>

            <tr>
            <tr><button>Cajón 6</button></tr>
            <tr><button>Cajón 7</button></tr>
            <tr><button>Cajón 8</button></tr>
            <tr><button>Cajón 9</button></tr>
            <tr><button>Cajón 10</button></tr>
            </tr>

            <tr>
            <tr><button>Cajón 11</button></tr>
            <tr><button>Cajón 12</button></tr>
            <tr><button>Cajón 13</button></tr>
            <tr><button>Cajón 14</button></tr>
            <tr><button>Cajón 15</button></tr>
            </tr>

            <tr>
            <tr><button>Cajón 15</button></tr>
            <tr><button>Cajón 17</button></tr>
            <tr><button>Cajón 18</button></tr>
            <tr><button>Cajón 19</button></tr>
            <tr><button>Cajón 20</button></tr>
            </tr>

        </div>

    </div>

</div>

Aquí tengo el Javascript:

   function visualizar() {

   if (document.form1.niveles.value == "n0")
  {
  alert("Favor de seleccionar un nivel");
  }  else if (document.form1.niveles.value == "n1") 
  {
  document.getElementsByClassName("modal");
  }

 

}

Aquí tengo el código para ser mas especifico https://jsfiddle.net/84tncy2u/

1 respuesta 1

1

Si usas getElementsByClassName, te va a devolver una lista de elementos, tendrás que seleccionar el que quieras mostrar (en mi ejemplo muestra el primero).

Luego, tienes puesto el atributo CSS visibility en hidden, así que tienes que cambiarlo a visible, y el opacity lo tienes a 0, así que tienes que ponerlo a 1.

En el código de abajo solo he cambiado el javascript:

function visualizar() {
  if (document.form1.niveles.value == "n0") {
    alert("Favor de seleccionar un nivel");
  }
  else if (document.form1.niveles.value == "n1") {
    const modal = document.getElementsByClassName("modal")[0];

    modal.style.visibility = "visible";
    modal.style.opacity = 1;
  }
}
.modal {
  position: fixed;
  top: 200px;
  left: 500px;
  opacity: 0;
  visibility: hidden;
}

.contenedor-cajones {
  width: 450px;
  height: 380px;
  margin: auto;
  background: rgb(180, 219, 217);
}

.contenedor-cajones header {
  padding: 10px;
  background: rgb(4, 66, 95);
  font-size: 18px;
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.contenedor-cajones .btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-block;
  width: 16px;
  height: 24px;
  background: rgb(245, 8, 8);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 25px;
  font-size: 20px;
  color: white;
  cursor: pointer;
}

.lbl-modal {
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.contenedor-cajon {
  background: darkgray;
  position: relative;
  top: 10px;
  margin: auto;
  padding: 15px 15px;
  max-width: 397px;

  flex-wrap: wrap;
}
button {
  background: rgb(13, 202, 13);
  width: 60px;
  height: 40px;
  margin: 5px;
  cursor: pointer;
}
<form id="form1" name="form1">
  <input placeholder="Vehículo" type="text" id="vehiculo">
  <input placeholder="Placa" type="text" id="placa">

  <select name="niveles" id="niveles" class="select-4" onchange="visualizar();">
    <option value="n0">Seleccionar el nivel</option>
    <option value="n1">Nivel 1</option>
  </select>

</form>

<div id="asd"></div>


<div class="modal">
        <div class="contenedor-cajones">
            <header>Nivel 1</header>
            <label for="btn-modal">X</label>
            <div class="contenedor-cajon">
                <tr>
                <tr><button id="cajon1">Cajón 1</button></tr>
                <tr><button id="cajon2">Cajón 2</button></tr>
                <tr><button id="cajon3">Cajón 3</button></tr>
                <tr><button id="cajon4">Cajón 4</button></tr>
                <tr><button id="cajon5">Cajón 5</button></tr>
                </tr>
                <tr>
                <tr><button>Cajón 6</button></tr>
                <tr><button>Cajón 7</button></tr>
                <tr><button>Cajón 8</button></tr>
                <tr><button>Cajón 9</button></tr>
                <tr><button>Cajón 10</button></tr>
                </tr>
                <tr>
                <tr><button>Cajón 11</button></tr>
                <tr><button>Cajón 12</button></tr>
                <tr><button>Cajón 13</button></tr>
                <tr><button>Cajón 14</button></tr>
                <tr><button>Cajón 15</button></tr>
                </tr>
                <tr>
                <tr><button>Cajón 15</button></tr>
                <tr><button>Cajón 17</button></tr>
                <tr><button>Cajón 18</button></tr>
                <tr><button>Cajón 19</button></tr>
                <tr><button>Cajón 20</button></tr>
                </tr>
    
            </div>
    
        </div>
    
    </div>

1
  • Gracias AdrianJM, me funciono tu respuesta, en los estilos CSS lo deje tal como están ya que si cambio a opacity : 1 y visibility : visible al momento de abrir la página como tengo mas inputs en el formulario no me deja llenar los datos por eso lo tengo oculto, ya con el apoyo que me diste en Javascript puedo llamar el modal gracias camarada.
    – Miguel
    Commented el 14 feb. 2021 a las 3:39

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.