added prefix to css classes to prevent clash with other libs

Author: cornflourblue

src/app/_content/modal.less

@@ -1,24 +1,24 @@
 /* MODAL STYLES
 -------------------------------*/
-modal {
+jw-modal {
  /* modals are hidden by default */
  display: none;
 
- .modal {
+ .jw-modal {
  /* modal container fixed across whole screen */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
 
- /* z-index must be higher than .modal-background */
+ /* z-index must be higher than .jw-modal-background */
  z-index: 1000;
 
  /* enables scrolling for tall modals */
  overflow: auto;
 
- .modal-body {
+ .jw-modal-body {
  padding: 20px;
  background: #fff;
 
@@ -27,7 +27,7 @@ modal {
  }
  }
 
- .modal-background {
+ .jw-modal-background {
  /* modal background fixed across whole screen */
  position: fixed;
  top: 0;
@@ -39,12 +39,12 @@ modal {
  background-color: #000;
  opacity: 0.75;
 
- /* z-index must be below .modal and above everything else */
+ /* z-index must be below .jw-modal and above everything else */
  z-index: 900;
  }
 }
 
-body.modal-open {
+body.jw-modal-open {
  /* body overflow is hidden to hide main scrollbar when modal window is open */
  overflow: hidden;
 }

src/app/_directives/modal.component.ts

@@ -3,8 +3,14 @@
 import { ModalService } from '../_services';
 
 @Component({
- selector: 'modal',
- template: '<ng-content></ng-content>'
+ selector: 'jw-modal',
+ template: 
+ `<div class="jw-modal">
+ <div class="jw-modal-body">
+ <ng-content></ng-content>
+ </div>
+ </div>
+ <div class="jw-modal-background"></div>`
 })
 
 export class ModalComponent implements OnInit, OnDestroy {
@@ -29,7 +35,7 @@ export class ModalComponent implements OnInit, OnDestroy {
 
  // close modal on background click
  this.element.addEventListener('click', function (e: any) {
- if (e.target.className === 'modal') {
+ if (e.target.className === 'jw-modal') {
  modal.close();
  }
  });
@@ -47,12 +53,12 @@ export class ModalComponent implements OnInit, OnDestroy {
  // open modal
  open(): void {
  this.element.style.display = 'block';
- document.body.classList.add('modal-open');
+ document.body.classList.add('jw-modal-open');
  }
 
  // close modal
  close(): void {
  this.element.style.display = 'none';
- document.body.classList.remove('modal-open');
+ document.body.classList.remove('jw-modal-open');
  }
 }

src/app/app.component.html

@@ -9,6 +9,9 @@
 
 <!-- credits -->
 <div class="credits">
+ <p>
+ <a href="http://jasonwatmore.com/post/2018/05/25/angular-6-custom-modal-window-dialog-box" target="_top">Angular 6 - Custom Modal Window / Dialog Box</a>
+ </p>
  <p>
  <a href="http://jasonwatmore.com" target="_top">JasonWatmore.com</a>
  </p>

src/app/home/home.component.html

@@ -5,25 +5,13 @@ <h1>Home</h1>
  <button (click)="openModal('custom-modal-2')">Open Modal 2</button>
 </div>
 
-<modal id="custom-modal-1">
- <div class="modal">
- <div class="modal-body">
- <h1>A Custom Modal!</h1>
- <p>
- Home page text: <input type="text" [(ngModel)]="bodyText" />
- </p>
- <button (click)="closeModal('custom-modal-1');">Close</button>
- </div>
- </div>
- <div class="modal-background"></div>
-</modal>
+<jw-modal id="custom-modal-1">
+ <h1>A Custom Modal!</h1>
+ <p>Home page text: <input type="text" [(ngModel)]="bodyText" /></p>
+ <button (click)="closeModal('custom-modal-1');">Close</button>
+</jw-modal>
 
-<modal id="custom-modal-2">
- <div class="modal">
- <div class="modal-body">
- <h1 style="height:1000px">A Tall Custom Modal!</h1>
- <button (click)="closeModal('custom-modal-2');">Close</button>
- </div>
- </div>
- <div class="modal-background"></div>
-</modal>
+<jw-modal id="custom-modal-2">
+ <h1 style="height:1000px">A Tall Custom Modal!</h1>
+ <button (click)="closeModal('custom-modal-2');">Close</button>
+</jw-modal>