Bootstrap 4 alert box
<div class='alert alert-primary' role='alert'>
primary alert
</div>
<div class='alert alert-secondary' role='alert'>
secondary alert
</div>
<div class='alert alert-success' role='alert'>
success alert
</div>
<div class='alert alert-danger' role='alert'>
danger alert
</div>
<div class='alert alert-warning' role='alert'>
warning alert
</div>
<div class='alert alert-info' role='alert'>
info alert
</div>
<div class='alert alert-light' role='alert'>
light alert
</div>
<div class='alert alert-dark' role='alert'>
dark alert
</div>
DEMO of BS4 alert using JQuery
Including Link within alert
Links within Alert takes the colour matching to the alert.
You can learn more about JQuery Here.
<div class='alert alert-info' role='alert'>
You can learn
more about <a href="site_map.php" class="alert-link">JQuery</a> Here.
</div>Close the message ( Alert )
User can dismiss the alert, it requires JavaScript plugin or Jquery should be included.Try to close this alert by clicking the X at right.
Welcome to plus2net! Read here about web programming .
<div class="alert alert-primary alert-dismissible fade show" role="alert">
<strong>Welcome to plus2net!</strong> Read here about web programming .
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>Closing the message after some time delay
Click this button to open one alert box. The alert box will self close after 4 seconds.
Hi! I will close after 4 Seconds .
You can open me by clicking the button.
The complete HTML and JQuery code is here .
You can open me by clicking the button.
<button type='button' class='btn btn-primary' id='b_show_alert'>
Show Alert Box
</button>
<br><br>
<div class="alert alert-primary" role="alert" id=alert_msg>
<strong>Hi!</strong> I will close after 4 Seconds .<br>
You can open me by clicking the button.
</div>
<script>
$(document).ready(function() {
$('#alert_msg').hide();
$('#b_show_alert').click(function(){
$('#alert_msg').show();
setTimeout(function() { $("#alert_msg").fadeOut('slow'); }, 4000);
})
})
</script>Adding Style
We can position the alert box at different part of the page by usign style. We can hide the alert box while the page loads and connect it to any associated event to display.The style below will display the alert box at top, right of the page. As the position is kept as fixed, so the alert box will display below the address bar even if the user scrolls down to bottom of the page.
<style>
#alert_msg{
display: none;
position: fixed;
z-index: 10;
top:0;
right:0;
}
</style>
This article is written by plus2net.com team.
| Most Popular JQuery Scripts | |
1 | Two dependant list boxes |
2 | Calendar with Date Selection |
3 | Data change by Slider |
4 | Show & Hide element |
JQuery Video Tutorials