We will discuss how to make dialog box/popup using bootstrap. so we will give you a simple example of a bootstrap popup, bootstrap dialog box and bootstrap modal.
normally many learners cannot make the dialog box and face the problem regarding the dialog box. many plugins are available for the make the dialog box. but here simply we will use the bootstrap model dialog box.
Now, we will load the bootstrap.min.css, jquery.min.js and bootstrap.min.js. so you can follow the below example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!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"> <!-- When you click on button then open the modal --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#largeModel">Open Large Modal</button> <div class="modal fade" id="largeModel" 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">Large Modal</h4> </div> <div class="modal-body"> <p>Hello XpertPhp.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <br/><br/> <!-- When you click on button then open the modal --> <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#smallModel">Open Small Modal</button> <div class="modal fade" id="smallModel" role="dialog"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Small Modal</h4> </div> <div class="modal-body"> <p>Hello XpertPhp.</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> |
Here above example we have used data-toggle and data-target. The data-toggle is one type of modal window and the data-target is when you click on the button then target attribute wise it will open a particular target model. you can make sizes wise models such as modal-sm and modal-lg.
If you like this article then You can see, comment and share this article demo.