Bootstrap 4 - Modal
Descripción
Modal es una ventana secundaria que se coloca en capas sobre su ventana principal. Muestra el contenido de una fuente separada que puede tener alguna interacción sin salir de la ventana principal.
Modal básico
Cree un modal utilizando la clase .modal y el atributo data-toggle = "modal" en un elemento, como un botón o enlace, junto con un data-target = "#identifier" o href = "#identifier" para apuntar a un modal para alternar.
Un ejemplo de ventana modal estática se muestra en el siguiente ejemplo:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class =" container">
<h2>Basic Modal</h2>
<br>
<!-- Button trigger modal -->
<button type = "button" class = "btn btn-info" data-toggle = "modal" data-target = "#exampleModal">Launch Modal</button>
<!-- Modal -->
<div class = "modal fade" id = "exampleModal" tabindex = "-1"
role = "dialog" aria-labelledby =" exampleModalLabel" aria-hidden = "true">
<div class = "modal-dialog" role = "document">
<div class = "modal-content">
<div class = "modal-header">
<h5 class = "modal-title" id = "exampleModalLabel">Modal Header</h5>
<button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
<span aria-hidden = "true">×</span>
</button>
</div>
<div class = "modal-body">
Modal Body
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-danger" data-dismiss = "modal">Close</button>
<button type = "button" class = "btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Centrado verticalmente, usando la cuadrícula, la información sobre herramientas y las ventanas emergentes
Puede hacer que el modal se centre verticalmente agregando la clase .modal-dialog-centrada en el elemento .modal-dialog . Use el sistema de cuadrícula dentro de un modal agregando la clase .container-fluid dentro de la clase .modal-body . Puede colocar la información sobre herramientas y los elementos emergentes agregando los atributos data-toggle = "popover" y data-toggle = "tooltip" .
El siguiente ejemplo demuestra el uso de las formas anteriores:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Vertically centered, Using the Grid, Tooltips and Popovers</h2>
<br>
<button type = "button" class = "btn btn-info" data-toggle = "modal"
data-target = "#exampleModalGrid">Open Modal</button>
<!-- Modal -->
<div class = "modal fade" id = "exampleModalGrid" tabindex = "-1"
role = "dialog" aria-labelledby = "exampleModalLabel" aria-hidden = "true">
<div class = "modal-dialog modal-dialog-centered" role = "document">
<div class = "modal-content">
<div class = "modal-header">
<h5 class = "modal-title" id = "exampleModalLabel">Modal Header</h5>
<button type = "button" class = "close" data-dismiss = "modal"
aria-label = "Close">
<span aria-hidden = "true">×</span>
</button>
</div>
<div class = "modal-body">
<h5>Grid system in a modal</h5>
<div class = "row">
<div class = "col-md-4 bg-primary">class = 'col-md-4'</div>
<div class = "col-md-4 bg-success">class = 'col-md-4'</div>
<div class = "col-md-4 bg-primary">class = 'col-md-4'</div>
</div>
<br>
<div class = "row">
<div class = "col-8 col-sm-6 bg-primary">class = 'col-8 col-sm-6'
</div>
<div class = "col-4 col-sm-6 bg-success">class = 'col-4 col-sm-6'
</div>
</div>
<hr>
<h5>Popover in a modal</h5>
<a href = "#" data-toggle = "popover"
title = "Popover in a modal"
data-content = "Popover content inside modal">Click Me For Popover</a>
<hr>
<h5>Tooltip in a modal</h5>
<a href = "#" data-toggle = "tooltip" title = "Tutorialspoint!">Just Hover!</a>
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-danger" data-dismiss = "modal">Close</button>
<button type = "button" class = "btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Tamaño modal
Puede usar la clase .modal-sm para modales pequeños y la clase .modal-lg para modales grandes como se muestra en el siguiente ejemplo:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Modal Size</h2>
<br>
<!-- Large modal -->
<button type = "button" class = "btn btn-info" data-toggle = "modal"
data-target = ".bd-example-modal-lg">Large modal</button>
<div class = "modal fade bd-example-modal-lg" tabindex = "-1"
role ="d ialog" aria-labelledby =" myLargeModalLabel"
aria-hidden = "true">
<div class = "modal-dialog modal-lg">
<div class = "modal-content">
<div class = "modal-header">
<h5 class = "modal-title" id = "exampleModalLabel">Modal Header</h5>
<button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
<span aria-hidden = "true">×</span>
</button>
</div>
<div class = "modal-body">
Large Size Modal
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-danger" data-dismiss = "modal">Close</button>
<button type = "button" class = "btn btn-success">Save</button>
</div>
</div>
</div>
</div>
<!-- Small modal -->
<button type = "button" class = "btn btn-info" data-toggle = "modal"
data-target = ".bd-example-modal-sm">Small modal</button>
<div class = "modal fade bd-example-modal-sm" tabindex = "-1"
role = "dialog" aria-labelledby = "mySmallModalLabel" aria-hidden = "true">
<div class = "modal-dialog modal-sm">
<div class = "modal-content">
<div class = "modal-header">
<h5 class = "modal-title" id = "exampleModalLabel">Modal Header</h5>
<button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
<span aria-hidden = "true">×</span>
</button>
</div>
<div class = "modal-body">
Small Size Modal
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-danger"
data-dismiss = "modal">Close</button>
<button type = "button" class = "btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Contenido modal variable
Puede tener un grupo de botones para lanzar modales con diferentes contenidos. Utilice la propiedad event.relatedTarget (devuelve el destino relacionado de un elemento) y los atributos HTML data- * para mostrar el contenido según el botón en el que se hizo clic.
El siguiente ejemplo demuestra esto:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Varying Modal Content</h2>
<br>
<button type = "button" class = "btn btn-info" data-toggle = "modal"
data-target = "#exampleVaryingModal1" data-whatever = "John Doe">
Recipient: John Doe</button>
<button type = "button" class = "btn btn-info" data-toggle = "modal"
data-target = "#exampleVaryingModal1" data-whatever = "Will Smith">
Recipient: Will Smith</button>
<button type = "button" class = "btn btn-info" data-toggle = "modal"
data-target = "#exampleVaryingModal1" data-whatever = "Dwayne Johnson">
Recipient: Dwayne Johnson</button>
<div class = "modal fade" id = "exampleVaryingModal1" tabindex = "-1"
role = "dialog" aria-labelledby = "exampleModalLabel" aria-hidden = "true">
<div class = "modal-dialog" role = "document">
<div class = "modal-content">
<div class = "modal-header">
<h5 class = "modal-title" id = "exampleModalLabel">New message</h5>
<button type = "button" class = "close" data-dismiss = "modal"
aria-label = "Close">
<span aria-hidden = "true">×</span>
</button>
</div>
<div class = "modal-body">
<form>
<div class = "form-group">
<label for = "recipient-name" class = "col-form-label">
Recipient:</label>
<input type = "text" class = "form-control" id = "recipient-name">
</div>
<div class = "form-group">
<label for = "message-text" class = "col-form-label">Message:</label>
<textarea class = "form-control" id = "message-text"></textarea>
</div>
</form>
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-danger"
data-dismiss = "modal">Close</button>
<button type = "button" class = "btn btn-success">Send</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#exampleVaryingModal1').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// We are jquery here to update the modal's content
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
});
</script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado: