3

I am using ngx-simple-modal plugin in angular7 app and i want to close modal when user click outside of modal component? I tried this

this.SimpleModalService.addModal(LinkPopupComponent, {title: 'Alert title!', message: 'Alert message!!!'},{ closeOnClickOutside: true });

i used this { closeOnClickOutside: true } option to close modal when user will outside of modal component as described in documentation.

In my LinkPopupComponent here is the code in my linkpopup.component.ts

// includes

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ReferalLinks, Category, Countries, Company } from '@app/core/services/FormModels.model';
import { LinkService } from '@app/module/link/service/link.service';
import { DataService } from '@app/core/services/data.service';
import { Constants } from '@app/core/services/Constants.service';
import { UtilitySerivce } from '@app/core/services/utitility.service';
import { SimpleModalComponent } from 'ngx-simple-modal';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
declare var $: any;

export interface LinkModel {
    title: string;
    message: string;
}

export class LinkPopupComponent extends SimpleModalComponent<LinkModel, null> implements OnInit,LinkModel {

constructor(private linkSerive: LinkService) {
        super();
        this.getCountries();
    }
   /// Here is my all related code but can't share that code
}

In my linkpopup.component.html my Html is like this

<div class="modal-container">
    <i class="material-icons cursor-pointer close-btn-specs" (click)="close()">close</i>

    <h4 class="frm-hdng">Submit a referral link</h4>
    <div class="text-left mrgTop">
        <label class="field-label">Company</label>
    </div>
    <div class="autocomplete">
        <div class="company-text-area" [class.bdr-red]="isCompanyValid === false  && nameDisplayModel === ''">
            <input type="text" placeholder="E.g. ClassPass, etc." [ngClass]="getCssClassOnValidationCondition(true)" (keyup)="credentialsSearchFilter($event)" (blur)="hideList()" [(ngModel)]="nameDisplayModel" style="width:100%">
        </div>
        <ul *ngIf="companies.length > 0" class="suggestion-list mt-2">
            <li class="modal-li" *ngFor="let record of companies" (mousedown)="getNameValue(record)">{{record.name}}</li>
        </ul>
    </div>
    <div class="text-left mrgTop">
        <label class="field-label">Referral Url</label>
    </div>
    <div class="company-text-area" [class.bdr-red]="isUrlValid == false || isLinkValidation === false">
        <input *ngIf="referralLink.isLink === 1" type="url" [ngClass]="getCssClassOnValidationCondition(false)" (input)="checkUrl()" (blur)="Validation(true)" [(ngModel)]="referralLink.referral_link" placeholder="E.g. www.xyzcompany.com/A4XpA" style="width: 100%;">
        <input *ngIf="referralLink.isLink === 0" type="text" [ngClass]="getCssClassOnValidationCondition(false)" (blur)="Validation(false)" [(ngModel)]="referralLink.referral_code" placeholder="E.g. JJaXmm22" style="width: 100%;">
    </div>

    <div class="not-link-div" *ngIf="isUrlValid === true || isCompanyValid === true || isLinkValidation === true">
        <label class="note">Not a link? Enter a <span class="purple Cpointer" *ngIf="referralLink.isLink === 1"
                        (click)="refTypeChange(0)">referral code</span> <span class="purple Cpointer"
                        *ngIf="referralLink.isLink === 0" (click)="refTypeChange(1)">link</span> instead.</label>
    </div>



    <div class="col-12 error-state-msg mt-3">
        <span class="red font-muli validation-error-msg-text" *ngIf="isUrlValid === false || isCompanyValid === false || isLinkValidation === false">
                <img src="./../../../../assets/svg-icons/exclamation.svg" alt="error msg image"
                    style="padding-right: 4px;">{{validationMsg}}
            </span>
    </div>

    <div class="mrgTop">
        <button class="cstm-btn bdr-purple bgPurple Cpointer" [disabled]="((isUrlValid == undefined || isUrlValid== false) || (isCompanyValid === false || isCompanyValid=== undefined) || (isLinkValidation === false || isLinkValidation=== undefined))? true : false"
            [style.cursor]="((isUrlValid == undefined || isUrlValid== false) || (isCompanyValid === false || isCompanyValid=== undefined) || (isLinkValidation === false || isLinkValidation=== undefined))? 'not-allowed' : 'pointer'" (click)="save()">Submit for approval</button>
    </div>

</div>

But still modal is not closing after clicking outside of it. How can i do that?

5
  • Can you share some more code? It is working in their demo. Maybe write a stackblitz. Nov 30, 2019 at 14:34
  • let me create a demo Nov 30, 2019 at 14:37
  • i created example in stackblitz so it's working there but not in my project. So what can i do now @DanielHabenicht ? Nov 30, 2019 at 15:02
  • @DanielHabenicht let me edit my question. Nov 30, 2019 at 15:10
  • @DanielHabenicht i updated my question please have a look of it. Nov 30, 2019 at 15:15

2 Answers 2

0

If you use ngx-simple-modal

You have to wrap with there class unless you have to do manual css for your classes

in ngx-simple-modal

   <div class="modal-content">
      <div class="modal-header">
        <h4>{{title || 'Alert!'}}</h4>
      </div>
      <div class="modal-body">
        <p>{{message || 'TADAA-AM!'}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="close()">OK</button>
      </div>
    </div> 

in your code

<div class="modal-container">

class="modal-container" not equal to class="modal-content"

hope this was the issue ..!

2
  • 1
    You can play around with this package here: stackblitz.com/edit/… The CSS class doesn't affect the click outside to close Dec 6, 2019 at 16:25
  • Can you crfeate a small example at stackblitz in which you use ngx-simple-modal and close that modal on outside click? Jan 8, 2020 at 11:34
0

This is a hunch:

Make sure you don't have anything over the modal wrapper (the transparent black background), it seams that when you click the wrapper an event is trigger and then the modal is closed. If you have anything over this wrapper then you wont be able to click "outside"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.