fix(modals): modal backdrop and onclick events handling

fixes #687, fixes #703, closes #708

1. This fix will resolve the issue of backdrop being displayed even when
the user sets backdrop as false.

2. This will provide option to users to control ignore backdrop clicks.

components/modal/modal-options.class.ts

@@ -13,6 +13,10 @@ export interface ModalOptions {
    * Shows the modal when initialized.
    */
   show:boolean;
+  /**
+   * Ignore the backdrop click
+   */
+   ignoreBackdropClick:boolean;
 }
 
 export const modalConfigDefaults:ModalOptions = {

components/modal/modal.component.ts

@@ -59,7 +59,6 @@ export class ModalDirective implements AfterViewInit, OnDestroy {
   protected _isShown:boolean = false;
 
   private isBodyOverflowing:boolean = false;
-  private ignoreBackdropClick:boolean = false;
   private originalBodyPadding:number = 0;
   private scrollbarWidth:number = 0;
 
@@ -76,8 +75,7 @@ export class ModalDirective implements AfterViewInit, OnDestroy {
 
   @HostListener('click', ['$event'])
   protected onClick(event:any):void {
-    if (this.config.backdrop !== 'static' &&
-        event.target === this.element.nativeElement) {
+    if (this.config.ignoreBackdropClick || this.config.backdrop === 'static') {
       this.hide(event);
     }
   }
@@ -107,7 +105,6 @@ export class ModalDirective implements AfterViewInit, OnDestroy {
     // this._backdrop            = null
     this._isShown = void 0;
     this.isBodyOverflowing = void 0;
-    this.ignoreBackdropClick = void 0;
     this.originalBodyPadding = void 0;
     this.scrollbarWidth = void 0;
 
@@ -226,7 +223,7 @@ export class ModalDirective implements AfterViewInit, OnDestroy {
 
   // todo: original show was calling a callback when done, but we can use promise
   private showBackdrop(callback?:Function):void {
-    if (this._isShown && modalConfigDefaults.backdrop) {
+    if (this._isShown && this.config.backdrop) {
       this.backdrop = this.componentsHelper
         .appendNextToRoot(
           ModalBackdropComponent,