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/