Cómo crear un modal simple
Cómo crear un Modal simple de bootstrap
El modal es una ventana emergente que genera mediante CSS y JQuery, proviene directamente del framework de bootstrap, Yii contiene un widget que lo genera de manera fácil de utilizar.
Para comenzar debe de incluir lo siguiente en la vista donde lo desee utilizar para incluir la librería correspondiente.
Si utilizas Bootstap 3
use yii\bootstrap\Modal;
Nota: Si utilizas Bootstap 4 dentro de tu proyecto debes incluir:
use yii\bootstrap4\Modal;
Para agregar el modal en Bootstrap 3 puede agregar el siguiente código dentro de la misma vista.
Modal::begin([
'header' => '<h2>Hello world</h2>',
'toggleButton' => ['label' => 'click me'],
]);
echo 'Say hello...';
Modal::end();
Para agregar el modal en Bootstrap 4 puede agregar el siguiente código dentro de la misma vista.
Modal::begin([
'title' => '<h2>Hello world</h2>',
'toggleButton' => ['label' => 'click me'],
]);
echo 'Say hello...';
Modal::end();
Usted puede modificar algunas características al modal como el título del encabezado modificando la propiedad 'header' y para modificar las características del botón deberá de modificar las propiedades de 'toggleButton' , por ejemplo el titulo del botón.
Si observa hay dos veces que se utiliza el Widget 'Modal' en esa parte usted puede agregar todo el contenido que desee que se encapsule dentro del modal. Es importante recordar que el modal siempre es ejecutado cuando se muestra la vista, sólo que mediante JQuey y CSS se oculta y cuando se da clic en el botón se muestra el modal.
Esto hará aparecer un botón con el cual al darle clic se mostrará el modal de la siguiente manera.
La forma de cerrar este modal siempre será dando clic en la X en la parte superior derecha ó dando clic fuera del modal.
Referencias:
Actualizado: 23-Diciembre-2020
Comentarios
Publicar un comentario