How to display alert in bootstrap modal?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we will learn how to display alert in bootstrap modal?.

Table of contents

  • Includes bootstrap view
  • Includes bootstrap library
  • Include the code in body
  • Add JavaScript in <script> tag

This article will guide you to adding display alert modal in Bootstrap with example.

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Step 2: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script

Step 3: Include the code in body

Include the code below in <body> to trigger the modal with a button.

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" id="alertbox">Click here</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">

        </div>
        <div class="modal-body">
          <p id="error"></p>
          <div class="alert alert-danger" role="alert">
            A simple danger alert—check it out!
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

Step 4: Add JavaScript in <script> tag

Add the following JavaScript in <script> tag after the <body> tag to specify display in modal.

<script>
    $(document).ready(function(){
  $('#alertbox').click(function(){
    $("#error").html("You Clicked on Click here Button");
      $('#myModal').modal("show");
    });
  });
</script>

Example.

Let’s look at the following example to understand how it basically works:

<!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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" id="alertbox">Click here</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">

        </div>
        <div class="modal-body">
          <p id="error"></p>
          <div class="alert alert-danger" role="alert">
            A simple danger alert—check it out!
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>
<script>
$(document).ready(function(){
  $('#alertbox').click(function(){
    $("#error").html("You Clicked on Click here Button");
      $('#myModal').modal("show");
    });
  });
</script>
</body>
</html>

Check the output of the above code example.

In this example, alert is accessed in script using the id and then alert is display an alert in bootstrap modal.

Bootstrap, Alert, Model

Bootstrap, Alert, Bootstrap, Modal

All the best 👍