Modal Plugin tutorial in Bootstrap CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Modal Plugin Bootstrap CSS</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"></script>
<script>
$(function () {
$("#myModal").modal({
backdrop: "static",
keyboard: false
});
$("#showBtn").click(function () {
$("#myModal").modal("show");
});
$("#closeModal").click(function () {
$("#myModal").modal("hide");
});
$("#myModal").on("shown.bs.modal", function () {
alert("Shown");
});
$("#myModal").on("show.bs.modal", function () {
alert("Show");
});
$("#myModal").on("hide.bs.modal", function () {
alert("Hide");
});
$("#myModal").on("hidden.bs.modal", function () {
alert("Hidden");
});
$("#myModal").on("hidePrevented.bs.modal", function () {
alert("Prevented");
});
});
</script>
</head>
<body>
<!--How to make Website Layout with Bootstrap ?-->
<!--3 Bootstrap CSS Classes : Container, Row, Col-->
<!--When use "Col" Class ? Answer: For Equal Width Div Tag-->
<!--Total width of Grid in Every row is 12-->
<!--Col Class for different Break Points-->
<!--Extra Large:col-lg, Large:col-lg, Medium:col-md, Small:col-sm, Extra Small-->
<!--Total width of Column Grid must be maximum 12 in one Row-->
<div class="container">
<h2 class="py-3 text-center">Bootstrap Modal</h2>
<div class="row py-3 justify-content-center">
<div class="col-md-3">
<!--Button trigger modal-->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Launch Modal</button>
<button id="showBtn" class="btn btn-success">Click</button>
<!--Modal-->
<div class="modal fade" id="myModal" data-bs-backdrop="static" aria-labelledby="exampleModalLabel"
aria-hidden="true" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title fs-5" id="exampleModalLabel">Modal Title</h5>
<button type="button" id="closeModal" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">Col A</div>
<div class="col-md-6">Col B</div>
</div>
<div class="row">
<div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
A, saepe?</div>
<div class="col-md-8">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Laudantium, fuga?</div>
</div>
</div>
<!--Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel a odit atque. Magni sit
nisi voluptatem aliquam maxime facilis veniam, suscipit animi architecto debitis nemo
repellat porro? Voluptates, repudiandae odit eaque unde tempora fugit non aliquid et
aperiam doloribus incidunt ea saepe deleniti, libero, accusantium placeat corrupti
debitis nobis? Provident cum, tenetur vitae porro, ullam incidunt ut ex ea sit nulla
quod repudiandae iure voluptas labore impedit a! Asperiores, culpa, quas repudiandae
impedit ratione sint autem numquam et eligendi accusamus officiis in aspernatur
voluptate doloribus consectetur sunt architecto natus. Veritatis ipsum est voluptas
commodi voluptates? Fugiat aperiam esse natus? Voluptatibus est aut earum, mollitia
maiores architecto. Hic, minus veritatis minima natus doloremque dignissimos ea? Libero
earum facilis accusantium quod molestiae vitae fugit veniam, quae impedit totam ab
corporis unde natus nam possimus similique tempore consectetur quam quisquam suscipit
at. Aspernatur natus expedita fugit placeat reiciendis amet perspiciatis deleniti sequi
unde saepe eum corporis repellendus deserunt inventore voluptatem, sed repudiandae
aliquam adipisci, ad temporibus neque. Temporibus quaerat molestiae incidunt sapiente
aliquid, in dignissimos vel perferendis voluptatibus exercitationem assumenda
consequuntur similique sequi magni! Eaque aut laudantium laborum eius dolore maxime,
neque rerum debitis exercitationem magni, perspiciatis asperiores vel modi omnis
corrupti enim? Iste officiis ea id quidem architecto molestiae incidunt nesciunt? Illo
dolorum vitae veritatis exercitationem, necessitatibus, aut ex eaque molestias eos
impedit, hic nisi. Architecto ad nesciunt tempora pariatur asperiores soluta fugit
ducimus aperiam corrupti accusantium, vel ab aliquam saepe et deleniti quo! Aperiam
sapiente architecto aliquid voluptatibus perferendis officiis libero minus numquam
quidem sint velit fugiat, laboriosam veniam facere, eaque iusto, labore voluptatem quae.
Temporibus doloribus, vitae ut accusantium culpa iusto eaque nemo autem voluptatum
aperiam dolorem nam voluptatem cupiditate perspiciatis quibusdam repellendus itaque
quasi, dolores vero perferendis dolorum. Pariatur autem magnam hic nesciunt fuga
perspiciatis temporibus aliquam ad dolorem iure quisquam sequi, voluptate at, adipisci
optio velit deserunt consequuntur in? Suscipit, molestiae quia. Voluptates non odio
alias accusamus inventore fugiat tempore deleniti, aliquid rem repellat sint a laborum
reprehenderit incidunt ex similique saepe possimus aut, ea nisi velit eligendi
voluptatem veniam. Autem nobis veniam hic officiis eaque aliquid necessitatibus unde
repudiandae soluta quasi. Provident fugit excepturi iusto tenetur, eos nemo a maxime
consectetur perspiciatis atque fugiat aperiam, labore doloribus ex ab. Accusantium
facere dolorem tempora fugit dolores cumque cupiditate porro dolore quisquam mollitia
voluptas commodi aperiam sapiente doloribus reiciendis sunt rem perspiciatis quae
reprehenderit eligendi nulla, praesentium cum modi? Culpa corporis enim mollitia sint
omnis unde obcaecati natus debitis consectetur quibusdam excepturi laudantium vero neque
cum aperiam asperiores similique molestias distinctio nobis, facilis incidunt error!
Dolores voluptate obcaecati quas libero doloremque voluptas quasi tempora nesciunt!
Repudiandae ad laborum hic sint unde, est minima, facilis tenetur veritatis distinctio
deleniti reiciendis. Necessitatibus aliquam error, quos aspernatur non quo iste saepe
minima tempore et sunt quasi dolores ipsum delectus tempora dignissimos molestiae quidem
incidunt facere dolorum doloribus distinctio repellat eius cumque! Excepturi itaque quos
sunt, explicabo, autem architecto inventore sit perspiciatis similique optio cumque
harum illum non quaerat aliquid debitis voluptas fuga!-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment