Define the style for the body of the modal with Bootstrap

Use the .modal class to define the style for the body of the modal.

You can try to run the following code to implement the .modal class −

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <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.3.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>Website Information</h2>
         <button type = "button" class="btn btn-lg" data-toggle = "modal" data-target = "#new">Info</button>
         <div class = "modal fade" id = "new" role = "dialog">
            <div class = "modal-dialog">
               <div class = "modal-content">
                  <div class = "modal-header">
                     <button type = "button" class = "close" data-dismiss = "modal">×</button>
                     <h4 class = "modal-title">Warning</h4>
                  </div>
                  <div class = "modal-body">
                     <p>If JavaScript isn't enabled in your web browser, then you may not be able to see this information correcty.</p>
                  </div>
                  <div class = "modal-footer">
                     <button type = "button" class = "btn btn-default" data-dismiss="modal">Close</button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

Nancy Den

Updated on: 15-Jun-2020

162 Views

Kickstart Your Career

Get certified by completing the course

Get Started