No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from. 


  




  
  


Notification overlay
See archived documentation


Present the user with important information or a decision before continuing the workflow.




Make sure the @ng-bootstrap/ng-bootstrap package is already present in your project
or follow ng-bootstrap installation guidelines.


To import all ng-bootstrap components:


import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [NgbModule],
})
export class YourAppModule {
}


To import only this component:


import {NgbModalModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [NgbModalModule],
})
export class YourAppModule {
}



Make sure the @swisspost/design-system-styles package is already present in your project
or follow the installation guidelines.


To import all Design System styles:


@use '@swisspost/design-system-styles/index.scss';


To import only the styles required for this component:


@use '@swisspost/design-system-styles/basics.scss';
@use '@swisspost/design-system-styles/components/modal.scss';



Since the notification overlay appears above the page, generally blocking interaction with the content below,
it is important that the focus is move to an element within it.


By default, it is the first focusable element within the modal that receives focus upon opening.
However, You can decide to focus any other element by adding an ngbAutofocus attribute to it.



template.html
<div class="modal-header p-5 mb-3 rounded-top bg-danger">
  <div class="text-center">
    <span aria-hidden="true" class="pi pi-3x pi-2104-white mt-4 mb-3"></span>
    <p class="h4 bold">Please check your details</p>
    <p class="h4">Some information on the previous page is missing or incomplete.</p>
  </div>
</div>
<div class="modal-body">
  <p class="h5">If you confirm, the WebStamp may be incomplete.</p>
</div>
<div class="modal-footer justify-content-start flex-row-reverse">
  <button
    type="button"
    class="btn btn-primary btn-animated"
    (click)="activeModal.close()"
    ngbAutofocus
  >
    <span>Agree</span>
  </button>
  <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss()">Back</button>
</div>
component.ts
import { Component } from '@angular/core';
import { NgbActiveModal, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngb-modal-content',
  standalone: true,
  template: `template.html`,
  imports: [NgbModalModule],
})
export class NotificaionOverlayComponent {
  constructor(protected activeModal: NgbActiveModal) {}
}