Bootstrap Modal Popup Plugin

Bootstrap Modal Popup

Loading dynamic content on bootstrap modal popup is very simple,Let us know some details about the same.

Modal is a popup or a dialog-box that is display over a web page when you click on a button or when you load a page. This Modal is very useful to display any text or any content using HTML tags.

If you are using Bootstrap, then implementing Modal popup is very easy and is done in a fraction of minutes.

In this tutorial we will explain you how to open a bootstrap modal popup on button click and also show you how to click on dynamic button and get data according to it.

STEPS TO CREATE A MODAL

STEP 1:

Create a HTML page and copy the below code.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Modal Popup</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
   </body>
</html>
STEP 2:

Now include the Bootstrap and JQuery Library

<!-- Bootstrap library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

STEP 3:

Now add the code for modal popup

<div class="container">
   <h2>Modal Popup</h2>
   <!-- Trigger the modal with a button -->
   <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
   <!-- Modal -->
   <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
         <!-- Modal content-->
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
               <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
               <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
         </div>
      </div>
   </div>
</div>

Note that loading modal popup required Bootstrap and JQuery Library so don’t forget to load them, Or else modal will to popup.

Output will be like below.

Bootstrap modal

Related articles:

For more updates:

Follow us on our Facebook page :
Facebook

Do Follow my Instagram page for more updates :
Instagram

Join Our Telegram group for more updates :

Telegram

One thought on “Bootstrap Modal Popup Plugin

Leave a Reply

Your email address will not be published. Required fields are marked *

The maximum upload file size: 2 MB. You can upload: image, document. Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded.