Usamos el Modal de Javascript de Bootstrap, puede ver la documentación del modal de bootstrap
Como puedes ver en el repositorio github del proyecto tenemos en el directorio plugin/modal los ficheros
- func_modal.js
- ventanaModal.php
El primero es JS con el tenemos funciones para abrir modal, cerrarlo y alguna otra mas... :-)
El fichero php es el html template del modal, el cual podremo añadir con Javascript (Jquery) el contenido.
¿ Como lo añado en mi vista ?
Simplemente en fichero vista php añades:
<?php
echo '<script src="'.$HostNombre.'/plugins/modal/func_modal.js"></script>';
include $URLCom.'/plugins/modal/ventanaModal.php';
?>
Lo suelo colocar justo antes de cerrar la etiqueta body.
¿ Como muestro popModal y como cierro?
Pues desde nuestro JS podemos llamar a la función abrirModal que tenemos func_modal.js , enviando titulo y el contenido como parámetros.
Para cerrar lo mismo, utilizamos la funcion cerrarModal que tenemos func_modal.js
¿ Como hago algo después de cerrar el modal ?
En la documentación encontré el evento :
$('#ventanaModal').on('hidden.bs.modal', function (e) {
.... lo queremos hacer despues de cerrar.
});
Con este evento, se ejecuta al cerrar Modal..
Por ejemplo, puede ser interesante refrescar la pagina cuando añadimos o operamos algo, pero si pulsamos cerrar, te interesa que refresque la pagina para mostrar los cambios.
Esto prefectamente podrías hacerlo sin controlar el evento y poner recarga de pagina con javascript, pero si tienes un boton de cancelar el que no hace nada, o no simplemente deja todo igual, te interesa que no lo haga, es ahi donde entra el metodo anterior.