Bootstrap 4 Modal Popup with example

Very simple way of creating Bootstrap Modal Popup. Included are the modal header, modal body (required for padding), and modal footer (optional).

They can be used to display alert message, images, and videos in a website. To trigger the modal popup, you'll need to include a link or a button.

Below are the also example of Angular Bootsrap Popup.

Bootstrap Modal Popup

To see a working modal popup demo by clicking the button below. It will slide down and fade in from the top of the page.

Live Demo

To Create Bootstrap Modal Popup it takes following steps:-

  1. Include the css and js file of bootstrap.
  2. Link the modal popup on which text or action point you want to open popup using button or anchor tag.
  3. Copy the enter popup code and paste inside the page bottom just above the js files.
  • Html
  • Css and JavaScript
  • Example
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">  Launch demo modal </button>
OR
<a href="#!" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </a>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        Modal body text goes here.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap.min.css">

<!-- Bootstrap JS -->
<script src="/bootstrap.min.js"></script>

<!-- Optional JavaScript -->
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap.min.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Bootstrap Modal Popup!</h1>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">  Launch demo modal </button>
    OR
    <a href="#!" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </a>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            Modal body text goes here.
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="jquery-3.3.1.slim.min.js"></script>
    <script src="bootstrap.min.js"></script>
  </body>
</html>
Optional sizes
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

< !--Vertically centered -->
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

How to open popup using Angular and Bootstrap?

First: Import NgbModal module in the component.ts file of the corresponding component, and then we have to write code for the popup model in the HTML file of the corresponding component. If you need popup in home.component then have write the code home.componen.ts and home.componen.html file.

import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
Example: home.component.ts
  import {Component} from '@angular/core';

  import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

  @Component({
    selector: "app-home",
    templateUrl: "./home.component.html",
    styleUrls: ["./home.component.scss"]
  })
  export class HomeComponent implements OnInit {
    closeResult = '';

    constructor(private modalService: NgbModal) {}

    open(content) {
      this.modalService.open(content,
     {ariaLabelledBy: 'modal-basic-title'}).result.then((result)
        => {
        this.closeResult = `Closed with: ${result}`;
      }, (reason) => {
        this.closeResult =
           `Dismissed ${this.getDismissReason(reason)}`;
      });
    }

    private getDismissReason(reason: any): string {
      if (reason === ModalDismissReasons.ESC) {
        return 'by pressing ESC';
      } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
        return 'by clicking on a backdrop';
      } else {
        return `with: ${reason}`;
      }
    }
  }
How to open popup using Angular and Bootstrap?

Now, we have to use ng-template to construct the model which will create a popup.

Example: home.component.html
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">
    Popup using Angular and Bootstrap
</button>
-------------------------------------------------
<ng-template #content let-modal>
    <div class="modal-header">
        <h4 class="modal-title"
            id="modal-basic-title">
            Popup Title
        </h4>
        <button type="button" class="close" aria-label="Close"
        (click)="modal.dismiss('Cross click')">
            <span aria-hidden="true"> × </span>
        </button>
    </div>
    <div class="modal-body">
        <form>
            <div class="form-group">
                <label for="dateOfBirth">
                    Date of birth
                </label>
                <div class="input-group">
                    <input id="dateOfBirth"
                        class="form-control"
                        placeholder="yyyy-mm-dd"
                        name="dp" ngbDatepicker
                        #dp="ngbDatepicker">

                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary calendar"
                        (click)="dp.toggle()" type="button">
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark"
        (click)="modal.close('Save click')">
            Save
        </button>
    </div>
</ng-template>

If Bootstrap is not installed in your Angular application then first have to install Bootstrap. For Botstrap installation to your Angular application is an easy process. Just write the following command in your Angular CLI. It will add bootstrap into your node_modules folder.

ng add @ng-bootstrap/ng-bootstrap
Another Example of angular popup
home.component.html
---------------------------------
<button type="button" class="btn"
(click)="openDialog('PopupdataComponent')">
Popup using Angular
</button>
home.component.ts
---------------------------------
import { MatDialog } from '@angular/material';
import { PopupdataComponent } from '../popupdata/popupdata.component';

constructor(public dialog: MatDialog) { }

openDialog(action) {

const dialogRef = this.dialog.open(PopupdataComponent, {
 width: '700px',
 data:''
});
}
How to open popup in Angular

PopupdataComponent is new component which containg only inside popup data which you want to display in Popup. You have to import: import { PopupdataComponent } from '../popupdata/popupdata.component'; this is you component path which you have created.

In this tutorial we learn that how to create bootstrap modal poup using bootstrap css and js file, no need to include to extra javascript code for a default popup.

Simple responsive popup with example

You can customize this code further as per your requirement.