Bootstrap 4 alert box



DEMO of BS4 alert using JQuery

Including Link within alert

Links within Alert takes the colour matching to the alert.
<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.
<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.

The complete HTML and JQuery code is here .
<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>
chaging background & Font colour



Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com









    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




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer