Home » Web Design and Development » How to show Bootstrap Modal dialog on click of Button in html

How to show Bootstrap Modal dialog on click of Button in html

The following example shows the simple button, upon clicking which we tries to show simple modal dialog. You may copy the code and try in your html webpage.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Modal 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/4.5.2/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="container">
         <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalId">
         Click Button to view dialog
         </button>
         <div class="row">
            <div class="col-sm-4">
               <div class="modal fade" id="modalId" role="dialog">
                  <div class="modal-dialog">
                     <div class="modal-content">

                        <div class="modal-header">
                           <h4 class="modal-title">Heading of Modal</h4>
                           <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>

                        <div class="modal-body">
                           <p>This is paragraph </p>
                           <a href="#">This is hyperlink link </a>
                        </div>

                        <div class="modal-footer">
                           <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        </div>

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

The modal dialog related html contains following div blocks,

  • modal class
  • modal dialog class
  • modal content
  • modal Header
  • modal Body
  • modal Footer

The first three , modal class, modal dialog class and modal content are opening “div” whereas Header, Body and Footer is inside “modal content”.

The modal dialog when run in webpage, it will look like as below,

Reference : https://getbootstrap.com/docs/4.0/components/modal/


Subscribe our Rurban Life YouTube Channel.. "Rural Life, Urban LifeStyle"

Leave a Comment