Skip to content

Instantly share code, notes, and snippets.

@imxmacoyx

imxmacoyx/Modal.html

Created March 27, 2020 21:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save imxmacoyx/83e03f21d02a07da811bb9d78cb98f21 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save imxmacoyx/83e03f21d02a07da811bb9d78cb98f21 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap: Modal
Raw
Modal.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Estructura básica</title>
<!--CND de CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!-- Tamaños de columnas de bootstrap
Los tamaños de columna en bootstrap 4 son:
.col Extra pequeño (Extra Small) - Smartphones vertical Menos de 544px
.col-sm Pequeño (Small) - Smartphones vertical Mas de 544px y menos de 768px
.col-md Mediano (Medium) -Tablets Mas de 768px y menos de 992px
.col-lg Largo (Large) -Computadoras Mas de 992px y menos de 1200px
.col-xl Extra largo (Extra large) -Computadoras Mas de 1200px
-->
<div class="container">
<div class="row">
<div class="col">
<a href="#ventana" class="btn btn-primary btn-lg" data-toggle="modal">Boton #1</a>
<div class="modal fade" id="ventana">
<div class="modal-dialog">
<div class="modal-content">
<!-- Header de la ventana -->
<div class="modal-header">
<h4 class="modal-title">NOTAS</h4>
<button tyle="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
</div>
<!-- Contenido de la ventana -->
<div class="modal-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, error quaerat?
Nesciunt tempora voluptatum nihil porro voluptate aspernatur? Illo temporibus nobis
consequatur, eaque minus minima reiciendis nihil perspiciatis pariatur enim?
Inventore voluptate fuga assumenda voluptates hic laudantium vitae incidunt est ab,
ex eos quasi a! Quidem neque culpa voluptatem rem numquam nam veniam sit aperiam
veritatis quasi, hic quam distinctio.
Tenetur debitis vero consectetur suscipit, ducimus ad fugiat molestias dolor rerum
iusto libero numquam, cupiditate consequatur excepturi quaerat eaque exercitationem
recusandae repudiandae ut et nostrum, obcaecati odit sunt? Maiores, optio?
Dicta iusto vitae officia ab ea necessitatibus. Minus cupiditate nihil earum
voluptatem similique ducimus itaque eveniet sit dicta esse sunt corrupti cum,
reiciendis odit dolore. Repudiandae eligendi neque ea commodi.
Quasi deleniti odio dolores excepturi corporis quos fugit impedit? Enim autem
accusamus corporis itaque cumque deserunt ab recusandae quisquam! Totam minus
eligendi incidunt quod consectetur soluta recusandae ut sit doloribus.</p>
</div>
<!-- Footer de la ventana-->
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--CND DE JQUERY y otras herramientas necesarias-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment