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

Ways to create a rounded pane for Highchart's Solidgauge

I've noticed that my arcs have rounded edges, but the pane is flat. Is there a way to make the pane rounded as well? I am currently using Highcharts v9.1.2. I tried using "stroke-linejoin: "round"", but it didn't work. If you need any ...

javascripthighchartsreact-highcharts

What is the best way to group data by a specific value within a nested object when using ReactJS material-table?

I have a unique scenario where I possess an array of individuals featuring a nested object known as enterprise. My objective is to effectively group these individuals by the value of company.name within the confines of the Material-Table. const people = [ ...

javascriptreactjsmaterial-uimaterial-table

Is there a way to continuously send out this ajax request?

My attempt to use setInterval for sending an AJAX request every 2 seconds is causing the page to crash. It seems like there is something wrong in my code! Check out the code below: var fburl = "http://graph.facebook.com/http://xzenweb.co.uk?callback=?" ...

javascriptajaxjsonsetinterval

utilize jquery ajax to input various data

I am attempting to include multiple data in a jQuery ajax call. However, my current implementation is not working as expected. The data fetched is taken from the following span: <span id="<?php echo $tutorial_id; ?>" modes="<?php echo $modese ...

javascriptphpjqueryajax

Next JS restricts XLSX to return only 100 objects as an array of arrays

I've developed a file upload system that reads Excel files and uploads data to a database (using Mongoose). After implementing the code, I noticed that when I use console.log(sheetData), it returns an array of arrays with objects inside. Each internal ...

javascriptarraysexcelnext.jsxlsx

Utilizing pop-up alerts and AJAX requests in jQuery forms

I am looking to enhance my website by creating a form using PHP and jQuery. Currently, the form is placed in the footer of my website. However, I want to display the form results in a popup within the main section of the website without requiring a page ...

javascriptphpjqueryhtmlajax

Preventing redirection post-AJAX call using jQuery

Currently, I am attempting to implement a basic form submission using AJAX to send data to submit.php for database storage. However, upon submission, the page redirects to submit.php instead of staying on the current page. How can I make it submit without ...

javascriptphpjqueryajaxforms

Angular: Modifying the parent scope from a child component

Hey there! So I'm a beginner in this whole programming thing, but I'm currently working on a small application where I can add and update items with details using Ionic, Cordova, and AngularJS. However, I've hit a roadblock with the followin ...

javascriptangularjscordovaionic-frameworkcordova-plugins

Switch between playing and pausing the mp3 audio in the Next application by using the toggle

I am currently working on my website and I have been trying to add a button to the bottom of the page that can play or pause a song using useSound library. The song starts playing when I click it for the first time, however, I am facing difficulty in stopp ...

javascriptreactjsnext.jsusesound

Prevent page refresh when submitting a form using PureCSS while still keeping form validation intact

I'm currently implementing PureCSS forms into my web application and facing a challenge with maintaining the stylish form validation while preventing the page from reloading. I discovered that I can prevent the page reload by using onsubmit="return f ...

javascripthtmlajaxformsyui-pure-css

Actility's LoraWan platform integrated with Node-Red

I am currently working on learning how to implement an HTTP GET request for the Actility platform in Node-RED. However, I keep encountering an error 401 indicating that the authorization bearer is missing. This is how my setup looks: When making a reques ...

javascriptjsonhttprequestnode-red

Creating a unique custom error message for every validation option

I am using a Joi schema and I would like to set custom error messages for each validation option. Here is an example of my schema: const schema = Joi.object().keys({ name: Joi.string() .min(5).error(() => 'first message') .ma ...

javascriptnode.jsvalidationjoi

Having trouble with preventDefault() not working during a keyup event?

I am struggling to make preventDefault() function properly. Here are a few variations of the code that I have attempted: First: $(document).keyup(function (evt) { var charCode = (evt.which) ? evt.which : event.keyCode; if (charCode == 192) { ...

javascriptjquerygoogle-chromeinternet-explorer-8

Modify a dropdown menu selection and process it using ajax technology

My Simple HTML Form: <select id="single"> <option>Option 1</option> <option>Option 2</option> </select> <input value="load()" id="test" type="submit" /> <div id="result"></div> Javascript Co ...

phpjavascriptjqueryajax

Ember Gain a comprehensive understanding of the flow of execution between route and controller

Below is a snippet of my "box" route/controller: export default Ember.Controller.extend({ initialized: false, type: 'P', status: 'done', layouts: null, toggleFltr: null, gridVals: Ember.computed.alias('mode ...

javascriptajaxember.jsember-clirsvp-promise

Are there any factors within a local network or desktop environment that may impact the execution of JScript?

Something strange is happening with the JavaScript on my project. It works perfectly fine, except when accessed from computers at a specific company. Even more puzzling is that the JavaScript only fails about half of the time when accessed from that compan ...

javascriptajaxnetworkingdesktop

How can I apply and delete a css class only while scrolling in a React application?

Currently, I am designing a pretend blog layout to showcase my work. The grid of posts features cards that are precisely 400x400 in size with a hover effect that magnifies and adds a drop shadow (this is visible in the dashboard route). However, an issue ...

javascriptcssreactjsevent-handlingcss-animations

Ways to extract innerHTML content from a loaded element generated by using the .load() method

Check out the code snippet below: template.html : <div id="nav"> Welcome to Space </div> layout.html : <div id="content"> </div> $('#content').load("template.html #nav"); ale ...

javascriptjqueryhtmldom

"Utilizing PHP with FTP and AJAX, or other comparable technologies

After successfully creating a PHP class for FTP server interaction (connecting, changing directories, uploading files, etc.), I am now eager to provide real-time updates to users about the actions happening on the server. For example, notifying them with m ...

phpjavascriptajaxftp

When attempting to log an AJAX/JSON request, the console.log statement is displaying 'undefined'

Being new to AJAX, I have encountered an issue that I believe others may have faced as well. Despite numerous attempts and extensive research, I am unable to find a solution to this error. I am confident that it is something simple. Any help would be gre ...

javascriptjsonajax