0

necesito que me asesoren como hago para cerrar una venta modal al momento de hacer click a un boton

Estaba probando con myModal.hide() pero no se cierra

4
  • 1
    Será más fácil que podamos ayudarte si nos das más detalles. ¿Qué es lo que tienes ahora? ¿Puedes compartir la pieza de código relevante? ¿Qué has probado?
    – ArianJM
    Commented el 20 ene. 2021 a las 8:20
  • @ArianJM agregue codigo donde se hace el proceso de guardar, lo que necesito es que cierre la modal automaticamente cuando se envia el formulario
    – Pedro Ruiz
    Commented el 20 ene. 2021 a las 19:15
  • No se cierra con myModal.hide() porque ese no es el identificador de tu modal. Si estás usando AJAX, puedes cerrarlo en caso que se cumpla la funcion guardar(e), algo así como $("#add_categoria").modal("hide"); Commented el 20 ene. 2021 a las 20:49
  • En todo caso, por favor dale en editar tu pregunta, para añadir cómo estás intentando cerrarlo desde el JS. En lo posible, te recomiendo crear un ejemplo mínimo verificable Commented el 20 ene. 2021 a las 22:12

1 respuesta 1

2

Te pongo un ejemplo de abrir y cerrar modal con los botones. No tengo claro si es lo que quieres, pero quizá te ayude a encontrar lo que buscas.

function cerrarModal() {
  $('#fondo-modal').hide();
}

function abrirModal() {
  const $modal = $('#fondo-modal');
  $modal.show();
  $modal.css('display', 'flex');
}

const $botonAbrir = $('#pagina button');
const $botonCerrar = $('#contenido-modal button').eq(0);

// Click en abrir modal
$botonAbrir.on('click', () => {
  abrirModal();
});

// Click en cerrar
$botonCerrar.on('click', () => {
  cerrarModal();
});
#fondo-modal {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.54);
  display: none;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

#contenido-modal {
  background-color: #ffffff;
  padding: 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="pagina">
  <p>Contenido de mi página</p>
  <button>Abrir modal</button>
</div>

<div id="fondo-modal">
  <div id="contenido-modal">
    <h1>¿Seguro?</h1>
    <p>¿Seguro que quieres hacer esta acción?</p>
    <div>
      <button>Cerrar</button>
    </div>
  </div>
</div>

0

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.