0

Tengo el siguiente caso, quiero que al presionar un botón me aparezca un modal deslizándose de arriba hacia bajo y para cerrarlo en viceversa, hasta el momento tengo el siguiente código pero no funciona.

// Get the modal

var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("INVENTARIO");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
  modal.slideDown.display = "slow"; //Código para deslizar modal
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 10px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 125%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  color: #000000;
  background-image: url(../IMAGENES/bg_ventana_modal.png);
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  height: 73%;
  border-radius: 12px;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <h3>INVENTARIO DE VEHICULOS</h3>
    <table>
      <tr>
        <th>ALISTAMIENTO</th>
        <th>ESTADO</th>
      </tr>
      <tr>
        <td class="inventario">
          <font face="arial" size="1">PINTURA</font>
        </td>
        <td align="center">
          <select name="PINTURA" id="PINTURA">
                          <option value="Seleccione...">Seleccione...</option>
                          <option value="BUENO">BUENO</option>
                          <option value="MALO">MALO</option>
                          <option value="N/A">N/A</option>
                      </select>
        </td>
      </tr>
    </table>
  </div>
</div>


<input type="button" name="INVENTARIO" id="INVENTARIO" value="Insertar" onclick="document.getElementById('id01')">

1 respuesta 1

0

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}


/* Add Animation */

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}


/* The Close Button */

.close {
  color: black;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  color: white;
}

.modal-body {
  padding: 2px 16px;
}

.modal-footer {
  padding: 2px 16px;
  color: white;
}
<!DOCTYPE html>
<html>

<head>
  <style>
    /* The Modal (background) */
  </style>
</head>

<body>

  <!-- Trigger/Open The Modal -->
  <button id="myBtn">Insertar</button>

  <!-- The Modal -->
  <div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
      <div class="modal-header">
        <span class="close">&times;</span>
        <h2>VEHICULOS</h2>
      </div>
      <div class="modal-body">
        <h3>INVENTARIO DE VEHICULOS</h3>
        <table>
          <tr>
            <th>ALISTAMIENTO</th>
            <th>ESTADO</th>
          </tr>
          <tr>
            <td class="inventario">
              <font face="arial" size="1">PINTURA</font>
            </td>
            <td align="center">
              <select name="PINTURA" id="PINTURA">
                          <option value="Seleccione...">Seleccione...</option>
                          <option value="BUENO">BUENO</option>
                          <option value="MALO">MALO</option>
                          <option value="N/A">N/A</option>
                      </select>
            </td>
          </tr>
        </table>
      </div>
      <div class="modal-footer">
        <h3>fINAL</h3>
      </div>
    </div>

  </div>

  <script>
    // Get the modal
    var modal = document.getElementById('myModal');

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal 
    btn.onclick = function() {
      modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
      if (event.target == modal) {  
        modal.style.display = "none";
      }
    }
  </script>

</body>

</html>

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.