What is the best way to close ngx-simple-modal in angular7 when clicking outside of the modal component?

Can anyone help me with closing the modal in my angular7 app when the user clicks outside of the modal component? I have been using the ngx-simple-modal plugin, and I tried implementing the following code:

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

I added the option { closeOnClickOutside: true } as per the documentation to achieve this functionality. However, it doesn't seem to work as expected.

The structure of my LinkPopupComponent can be found in the linkpopup.component.ts, where I have included various imports and constructor details for reference.

In the corresponding linkpopup.component.html, the HTML template is defined with elements like input fields, labels, and buttons for submitting referral links. Despite trying to use the close method on click events, the modal still does not close when clicking outside of it.

If anyone has any insights or suggestions on how to resolve this issue, please let me know. Thank you!

javascriptangulartypescript

Answer №1

When utilizing ngx-simple-modal

You must enclose it within their class unless you prefer to manually style your classes with css

within 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" is not the same as class="modal-content"

I hope this resolves the issue for you!

Answer №2

Here's a suggestion:

Ensure that there are no elements positioned over the modal wrapper (the transparent black background). It appears that clicking on the wrapper triggers an event that closes the modal. If there are any overlapping elements, you may not be able to click "outside" of the modal.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can JSON be best connected in Angular for optimal performance?

My JSON structure is as follows: { items:[], errors:[], foundItems:9 } One part of my program requires access to "items", while another part needs access to "errors." To resolve this issue, I decided to create a new interface and a new class to hand ...

jsonangulartypescript

There seems to be a problem with the external JavaScript file not functioning

After dragging and dropping the .js file into my ASP.NET project, I am facing an issue where it remains unresponsive, even though the code works fine when used inline. This problem is occurring while using VS 2017. Here is a snippet of my code: <scrip ...

javascriptjquery

ES6 promises: the art of connecting functions with parameters

Looking for a way to chain functions with delays? Here is an example of what I have tried: Promise.resolve() .then(setKeyframe('keyframe-0')) .then(delay(3000)) .then(setKeyframe('keyframe-1')) .then(delay(3000)) .then(setKeyframe(&apo ...

javascriptpromiseecmascript-6es6-promise

We are creating a table in JavaScript and mistakenly adding an unnecessary tbody

I am currently utilizing a combination of plain JavaScript and Jquery in order to dynamically generate a table. The issue arises when I attempt to use a for loop to iterate through the data obtained from an Ajax request, as it fails to create new rows. To ...

javascripthtmldom

Incorporating the power of ES6 into a pre-existing website using React

I currently have an established website with a page accessible through the URL www.example.com/apps/myApp. The myApp functionality is embedded within an existing HTML page and serves as a utility app. I am interested in learning React, so I see this as a g ...

javascriptreactjses6-class

React Material Select: The error is caused by the property 'renderValue' with an expected type, as declared within the 'IntrinsicAttributes & SelectProps' type

Encountering an error with React Material Select, specifically on the Render Value function. How can I resolve this issue while using TypeScript? What should be added to the renderValue line? Error: Type '(selected: Array<number>) => string& ...

reactjstypescriptmaterial-ui

When trying to integrate Angular.ts with Electron, an error message occurs: "SyntaxError: Cannot use import statement

Upon installing Electron on a new Angular app, I encountered an error when running electron. The app is written in TypeScript. The error message displayed was: import { enableProdMode } from '@angular/core'; ^^^^^^ SyntaxError: Cannot use impor ...

javascriptangulartypescriptelectron

Challenges with implementing speech recognition within a React component's state

I've encountered an issue with the React library react-speech-recognition. When trying to modify the newContent state within useEffect, it ends up printing as undefined. Additionally, I'm facing a similar problem when attempting to update the sta ...

javascriptreactjsreact-hooksspeech-recognition

Modifying Angular 4 instance field in the code does not update the template as expected

One issue I am encountering is that changes in the instance variable in my component class are not automatically reflected in my template file unless I explicitly call ref.detectChanges The method signInWithGoogle in my auth service is called from the com ...

angulartypescriptrxjs

Tips on applying the "activate" class to a Bootstrap navbar in Angular 2 when implementing page anchor navigation

As I work on my single-page website using Angular 2 and Bootstrap 4, I have successfully implemented a fixed navbar component that remains at the top of the page. Utilizing anchor navigation (#id), the navbar allows smooth scrolling to different sections o ...

htmlcsstwitter-bootstrapangular

The 'canvas' module could not be located in the system.Here are the required stacks:- /var/task/index.js- /var/runtime/index.mjs

I am currently developing a lambda function using the serverless framework. The function utilizes chartjs-node-canvas to create graphics, and everything runs smoothly on my MacBook when tested locally. However, when I deploy the function to AWS either dire ...

javascriptnode.jsaws-lambdaserverless

What is the best method to divide a string, enclose it within a span tag, and generate fresh code using jQuery?

Is there a way to separate multiple links, enclose them in a span tag, and then iterate through them to display them back within the a tag? I have managed to split all the dates into the dateArr array, but I need help looping through them to output each on ...

javascriptjquery

When attempting to validate dates with the after: rule in vee-validate while also utilizing a computed field in Vue.js, the validation process may encounter unexpected issues

Below is a codepen with a simple input field for entering dates: <input type="text" v-model="startDate" name="StartDate" v-validate="{ required: false, date_format: 'dd/MM/yyyy', before: maxStartDate }"/> Despite e ...

javascriptvue.jsvee-validate

Having trouble with your Angular CLI project after attempting to duplicate it by copy and paste?

As a newcomer to Angular, I've recently embarked on creating a new project using the Angular CLI. Everything was going well until I decided to upload my work to GIT. After copying and pasting the project folder contents into another directory, I encou ...

node.jsgitangular

Creating a line of functions pool in Javascript with a delay feature

Recently, I created a code snippet that simulates a function line. It involves calling functions such as fn1, delay, fn2, delay, and so on. The idea is to call a function, remove it from the line, have a short sleep, and repeat. However, I've encount ...

javascriptjqueryfunctionlinepool

Error in AngularJS: Failed to retrieve data using $http.post()

One of my current challenges involves: Transferring text data from HTML form text boxes to the Controller using ng-model and ng-submit directives. Sending this data from the controller to a Service. The Issue at Hand: - I am facing difficulties accessi ...

javascriptangularjsnode.jsexpress

Next.js encountered an issue: React.Children.only function was expecting to receive only one React element child, but received more

I have created a component named Nav located in the components directory. Here is the code for it: import Link from 'next/link'; const Nav = () => { return( <div> <Link href="/"> <a> Home </a> ...

javascripthtmlreactjsfrontendnext.js

Should we retain the express variable for a specific purpose?

Being a developer who is still learning the ropes, I fail to understand the necessity of creating or retaining the express variable in an express/Node app. Instead of following this conventional approach: const express = require('express'); con ...

javascriptnode.jsexpress

At the ready stance for a particular grade of students attending a class

I have created a page with a navigation menu that can be scrolled using the wheel mouse. My goal is to ensure that the li item with the 'selected' class is always positioned in the first position on the left. Is there a way to achieve this using ...

javascriptjqueryhtmlcss

Do I have to utilize npm packages?

As a newcomer to Node.js, I'm diving into the world of node features while working on an Angular 2 project. One thing I've noticed is that every plugin seems to be imported from the node_modules folder. This has me wondering - is it absolutely n ...

angularnpmcdn