Friday, January 24, 2020

How to show a Bootstrap Alert by clicking a button

In this tutorial we'll learn how to show a Bootstrap Alert by clicking a button 

https://github.com/CarmelSchvartzman/BOOTSTRAP/blob/master/ALERT/ALERT_BY_BUTTON






How to show a Bootstrap Alert by clicking a button 



We create a new HTML webpage, as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container">
<div class='jumbotron'>
<h3>Open an Alert by clicking this button</h3>
<button class='btn btn-info btn-sm'  data-target='#myalert' data-toggle='modal'>Alert</button> 


<div class='modal' id='myalert'
  <div class='modal-dialog'>
    <div class='alert alert-info alert-dismissible'  >      <<<<<<<<<<<   DO NOT SET "FADE" !
      <strong>This is an alert opened by a button</strong>
      <button class='close' data-dismiss='modal'><span class='glyphicon glyphicon-cloud'></span></button>

    </div>
  </div>
</div>

</div>
</div>
</body>
</html>

Pay attention to the code marked bold . Tha't the important part.

That's all.... 
In this tutorial we've seen how to show a Bootstrap Alert by clicking a button  
Happy programming.....
      By Carmel Shvartzman
כתב: כרמל שוורצמן











No comments:

Post a Comment