Alerts Class 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>Alert Class and Plugin Tutorial</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 () {
$("#closeBtn").click(function () {
$("#redbox").alert("close");
});
$("#redbox").on("close.bs.alert", function () {
alert("Close");
});
$("#redbox").on("closed.bs.alert", function () {
alert("Closed");
});
});
</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 Alert</h2>
<div class="row py-3 justify-content-center">
<div class="col-md-7">
<div class="alert alert-primary alert-dismissible fade show" role="alert">
A simple primary alert-check it out!
<button type="button" class="btn-close" data-bs-dismiss="alert">
</button>
</div>
</div>
<div class="col-md-7">
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Success!</strong> A simple <a class="alert-link" href="">primary alert-check</a> it out!
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
</div>
<div class="col-md-7">
<div id="redbox" class="alert alert-danger alert-dismissible fade show" role="alert">
<h3 class="alert-heading">Heading Goes Here</h3>
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis, porro? Adipisci corporis
earum molestias, voluptas, incidunt laudantium quae magnam sint pariatur totam autem, beatae
ratione atque facere delectus fuga placeat. Sed magni esse doloremque reprehenderit assumenda
nobis, eaque corporis! Iure magnam tempora nam cupiditate voluptates alias ipsa, placeat velit
odit animi! Unde temporibus placeat eius in soluta ea, delectus quidem quas commodi dicta!
Minima dolorum quis quae ut voluptatibus reiciendis, nemo molestiae amet, iure natus voluptates
sapiente animi nostrum, assumenda vitae hic eius libero illum sequi tenetur ab. Facere ut
tenetur pariatur ratione totam sed nesciunt minima corporis reiciendis possimus.</p>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt consequatur a architecto neque
cumque commodi ipsam consequuntur alias aliquam mollitia.</p>
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if
you
like.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<button class="btn btn-danger" data-bs-dismiss="alert" id="closeBtn">Close</button>
<div id="liveAlertPlaceholder"></div><br>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
</div>
<script>
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
const appendAlert = (message, type) => {
const wrapper = document.createElement('div')
wrapper.innerHTML = [
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
` <div>${message}</div>`,
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
'</div>'
].join('')
alertPlaceholder.append(wrapper)
}
const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
alertTrigger.addEventListener('click', () => {
appendAlert('Nice, you triggered this alert message!', 'success')
})
}
</script>
</div>
</div>
</body>
</html>
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment