All for Joomla All for Webmasters

Bootstrap Modals

The bootstrap modal plugin is a dialog box / popup window that is displayed on top of the current page.

Bootstrap Modal Example

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Modal Example</h2>
  12.   <!– Trigger the modal with a button –>
  13.   <button type=“button” class=“btn btn-info btn-lg” data-toggle=“modal” data-target=“#myModal”>Open Modal</button>
  14.   <!– Modal –>
  15.   <div class=“modal fade” id=“myModal” role=“dialog”>
  16.     <div class=“modal-dialog”>
  17.       <!– Modal content–>
  18.       <div class=“modal-content”>
  19.         <div class=“modal-header”>
  20.           <button type=“button” class=“close” data-dismiss=“modal”>×</button>
  21.           <h4 class=“modal-title”>Modal Header</h4>
  22.         </div>
  23.         <div class=“modal-body”>
  24.           <p>Write your text in the modal.</p>
  25.         </div>
  26.         <div class=“modal-footer”>
  27.           <button type=“button” class=“btn btn-default” data-dismiss=“modal”>Close</button>
  28.         </div>
  29.       </div>
  30.     </div>
  31.   </div>
  32. </div>
  33. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  34. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  35. </body>
  36. </html>

Bootstrap Modal Size

You can change the size of the modal by adding the .modal-sm class for small modals or .modal-lg class for large modals.

The size class is added to the <div> element with class .modal-dialog.


Small Modal:

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Small Modal</h2>
  12.   <!– Trigger the modal with a button –>
  13.   <button type=“button” class=“btn btn-info btn-lg” data-toggle=“modal” data-target=“#myModal”>Open Small Modal</button>
  14.   <!– Modal –>
  15.   <div class=“modal fade” id=“myModal” role=“dialog”>
  16.     <div class=“modal-dialog modal-sm”>
  17.       <div class=“modal-content”>
  18.         <div class=“modal-header”>
  19.           <button type=“button” class=“close” data-dismiss=“modal”>×</button>
  20.           <h4 class=“modal-title”>Modal Header</h4>
  21.         </div>
  22.         <div class=“modal-body”>
  23.           <p>This is a small modal.</p>
  24.         </div>
  25.         <div class=“modal-footer”>
  26.           <button type=“button” class=“btn btn-default” data-dismiss=“modal”>Close</button>
  27.         </div>
  28.       </div>
  29.     </div>
  30.   </div>
  31. </div>
  32. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  33. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  34. </body>
  35. </html>

Bootstrap Large Modal

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Large Modal</h2>
  12.   <!– Trigger the modal with a button –>
  13.   <button type=“button” class=“btn btn-info btn-lg” data-toggle=“modal” data-target=“#myModal”>Open Large Modal</button>
  14.   <!– Modal –>
  15.   <div class=“modal fade” id=“myModal” role=“dialog”>
  16.     <div class=“modal-dialog modal-lg”>
  17.       <div class=“modal-content”>
  18.         <div class=“modal-header”>
  19.           <button type=“button” class=“close” data-dismiss=“modal”>×</button>
  20.           <h4 class=“modal-title”>Modal Header</h4>
  21.         </div>
  22.         <div class=“modal-body”>
  23.           <p>This is a large modal.</p>
  24.         </div>
  25.         <div class=“modal-footer”>
  26.           <button type=“button” class=“btn btn-default” data-dismiss=“modal”>Close</button>
  27.         </div>
  28.       </div>
  29.     </div>
  30.   </div>
  31. </div>
  32. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  33. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  34. </body>
  35. </html>
PinIt
submit to reddit

Leave a Reply

Top