Móvil-amigable bootstrap 4 modals-bootstrap4-FS-modal
| Autor: | keaukraine |
|---|---|
| Views Total: | 2,200 |
| Sitio oficial: | Ir a la web |
| Actualizado: | November 9, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Esta es la versión pura de jQuery bootstrap-FS-modal plugin que proporciona mejores experiencias de usuario de bootstrap 4 componentes modales en dispositivos móviles.
Instalación
# NPM $ npm install bootstrap4-fs-modal --save
Funcionamiento
Incluya la hoja de estilo principal del bootstrap4-FS-modal en su proyecto bootstrap 4.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <link href="dist/css/bootstrap-fs-modal.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
Agregue la clase CSS modal-Fullscreen al contenedor modal de destino y listo.
<div class="modal fade modal-fullscreen" id="modalSmall" tabindex="-1" role="dialog" aria-labelledby="modalSmallLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modalSmallLabel">Modal with small content</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p> Lorem ipsum dolor sit amet, consectetur. Sed posuere at neque nec hendrerit. Sed vitae felis gravida, ultricies dui eget, venenatis leo. Nunc hendrerit tellus. </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" id="btnTestRefreshSmall" class="btn btn-default"> <span class="d-none d-md-inline">Reload Data</span> <span class="d-md-none">Reload</span> </button> <button type="button" id="btnTestSaveSmall" class="btn btn-default"> <span class="d-none d-md-inline">Save changes</span> <span class="d-md-none">Save</span> </button> </div> </div> </div> </div>
Agregue la clase CSS bootstrap-FS-modal al contenedor primario.
<body class="bootstrap-fs-modal">
Reemplace las variables predeterminadas para crear sus propios estilos.
$modal-header-height: 50px; $modal-header-background: #f8f8f8;
