Bootstrap 4 alert box
Try to close this alert by clicking the X at right.
The complete HTML and JQuery code is here .
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.
destination source:https://www.plus2net.com/jquery/bs4-alert.php
Bootstrap 4 alert box
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 "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(); $("#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>Related Article
destination source:https://www.plus2net.com/jquery/bs4-alert.php