Fullscreen Modal? How to implement this

Angular2 cli 1.0.0-beta.30
bootstrap 4.0.0-alpha.5
ng-bootstrap 1.0.0-alpha.14

searching github/google/stackoverflow, I’m not seeing a ng-bootstrap version of the question:

How do I create a modal that is fullscreen (no backdrop, my content fills the extents of the window). And trying the bootstrap examples like this and this dont seem to work for me.

Looking at the ng-bootstrap docs here I’m also not seeing a way to make it fullscreen.

I can only pop up a centered box with sidebars (1/2 transparent backdrop)…

Anyone got a method?

Here’s (roughly what I’m doing):

Component:

export class BoxComponent implements OnInit {
    @ViewChild("box") private box:TemplateRef<any>;
    constructor(private modalService: NgbModal) {}
    open() {
        this.modalRef = this.modalService.open(this.box, {  windowClass: 'mymodal', 'backdrop': 'static' });
    }
}

CSS:

.mymodal {
  width: 100%%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
}

.modal-content {
  border: none;
  border-radius: 0;
  outline: none;

  .modal-header {
    padding: 1rem;
    margin-bottom: 0 !important;
    color: $gray0;
    border: none;
    text-align: center;
    font-size: 25px;
    font-weight: 300;
  }
  .modal-textarea {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    text-align: center;
    padding-left: auto;
    padding-right: auto;
    font-size: 22px;
    font-weight: 100;
  }
  .modal-body {
    border: none;
    padding: 0;
  }
  .modal-footer {
    border: none;
    text-align: center;
    font-size: 12px;
    padding-top: 3em;
  }
}

HTML template:

<template #box let-c="close" let-d="dismiss" class="modal-md">
  <div class="modal-content">
    <div class="modal-header">
... header ...
    </div>
    <div class="modal-textarea">
... textarea ...
    </div>
    <div class="modal-footer">
... footer ...
    </div>
  </div>
</template>

1 possible answer(s) on “Fullscreen Modal? How to implement this

  1. Found a Solution by playing around with the CSS inspector in chrome. Looks like the template wraps some extra <div> layers around my modal component’s html, each of which has the classes modal-dialog and modal-content respectively, see below for fullscreen solution:

    .mymodal {
      max-width: 100%%;
      width: 100%%;
      height: 100%%;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0;
      outline: none;
      .modal-dialog {
          max-width: 100%%;
          margin: 0;
          height: 100%%;
         .modal-content {
             height: 100%%;
         }
       }
    }