Modal

Add dialogs to your site for lightboxes, user notifications, etc.

Modal markup

Result
HTML

<!-- Modal markup -->
<ng-template #content role="document" let-modal>
  <div class="modal-header">
    <h5 class="modal-title">Modal title</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body">
    <p>Modal body text goes here.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary btn-sm">Save changes</button>
  </div>
</ng-template>

Tabs and forms

Result
HTML

<!-- Modal with tabs and forms -->
<ng-template #content role="document" let-modal>
  <div class="modal-header">
    <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav nav-tabs mb-0">
      <li [ngbNavItem]="1">
        <a ngbNavLink>
          <i class="fi-login fs-sm me-2 ms-n1"></i>
          Sign in
        </a>
        <ng-template ngbNavContent>
          <form class="tab-pane fade show active" autocomplete="off" id="signin">
            <div class="mb-3">
              <label class="form-label" for="email1">Email address</label>
              <input class="form-control" type="email" id="email1" placeholder="johndoe@example.com">
            </div>
            <div class="mb-3">
              <label class="form-label" for="pass1">Password</label>
              <div class="password-toggle">
                <input class="form-control" type="password" id="pass1">
                <label class="password-toggle-btn">
                  <input class="password-toggle-check" type="checkbox">
                  <span class="password-toggle-indicator"></span>
                </label>
              </div>
            </div>
            <div class="mb-3 d-flex flex-wrap justify-content-between">
              <div class="form-check mb-2">
                <input class="form-check-input" type="checkbox" id="remember">
                <label class="form-check-label" for="remember">Remember me</label>
              </div>
              <a class="fs-sm" href="#">Forgot password?</a>
            </div>
            <button class="btn btn-primary d-block w-100" type="submit">Sign in</button>
          </form>
        </ng-template>
      </li>
      <li [ngbNavItem]="2">
        <a ngbNavLink>
          <i class="fi-user fs-sm me-2 ms-n1"></i>
          Sign up
        </a>
        <ng-template ngbNavContent>
          <form class="tab-pane fade" autocomplete="off" id="signup">
            <div class="mb-3">
              <label class="form-label" for="name">Full name</label>
              <input class="form-control" type="text" id="name" placeholder="John Doe">
            </div>
            <div class="mb-3">
              <label class="form-label" for="email2">Email address</label>
              <input class="form-control" type="email" id="email2" placeholder="johndoe@example.com">
            </div>
            <div class="mb-3">
              <label class="form-label" for="pass2">Password</label>
              <div class="password-toggle">
                <input class="form-control" type="password" id="pass2">
                <label class="password-toggle-btn">
                  <input class="password-toggle-check" type="checkbox">
                  <span class="password-toggle-indicator"></span>
                </label>
              </div>
            </div>
            <div class="mb-3">
              <label class="form-label" for="pass3">Confirm password</label>
              <div class="password-toggle">
                <input class="form-control" type="password" id="pass3">
                <label class="password-toggle-btn">
                  <input class="password-toggle-check" type="checkbox">
                  <span class="password-toggle-indicator"></span>
                </label>
              </div>
            </div>
            <button class="btn btn-primary d-block w-100" type="submit">Sign up</button>
          </form>
        </ng-template>
      </li>
    </ul>
  </div>
  <div class="modal-body">
  <div [ngbNavOutlet]="nav" class="mt-2"></div>
  </div>
</ng-template>

Live demo

Result
HTML

<!-- Small modal -->
<ng-template #content role="document" let-modal>
  <div class="modal-header">
    <h5 class="modal-title">Modal title</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body">
    <p>...</p>
  </div>
</ng-template>

<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalSmall">
  Small modal
</button>

<!-- Default modal -->
<ng-template #content role="document" let-modal>
  <div class="modal-header">
    <h5 class="modal-title">Modal title</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body">
    <p>Modal body text goes here.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary btn-sm">Save changes</button>
  </div>
</ng-template>

<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalDefault">
  Default modal
</button>

<!-- Large modal -->
<ng-template #content role="document" let-modal>
  <div class="modal-header">
    <h5 class="modal-title">Modal title</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body">
    <p>Modal body text goes here.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary btn-sm">Save changes</button>
  </div>
</ng-template>

<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalLarge">
  Large modal
</button>

<!-- Extra large modal -->
<ng-template #content role="document" let-modal>
  <div class="modal-header">
    <h5 class="modal-title">Modal title</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body">
    <p>Modal body text goes here.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary btn-sm">Save changes</button>
  </div>
</ng-template>

<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalXL">
  Extra large modal
</button>

<!-- Modal with srolling content -->
<ng-template #content role="document" let-modal>
  <div class="modal-header">
    <h5 class="modal-title">Modal title</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body">
    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla</p>
    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary btn-sm">Save changes</button>
  </div>
</ng-template>

<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalScroll">
  Srolling content
</button>

<!-- Vertically centered modal -->
<ng-template #content role="document" let-modal>
  <div class="modal-header">
    <h5 class="modal-title">Modal title</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body">
    <p>Modal body text goes here.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary btn-sm">Save changes</button>
  </div>
</ng-template>

<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalCentered">
  Vertically centered modal
</button>

<!-- Full screen modal -->
<ng-template #content role="document" let-modal>
  <div class="modal-header">
    <h5 class="modal-title">Modal title</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body">
    <p>Modal body text goes here.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary btn-sm">Save changes</button>
  </div>
</ng-template>

<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalFullScreen">
  Full screen modal
</button>