Trouble with Bootstrap Modal not closing properly in Chrome and Safari

ISSUE: I'm facing a problem where clicking on the X (font awesome icon) doesn't close the modal popup as expected.

LIMITED FUNCTIONALITY ON CERTAIN BROWSERS:

Currently, the X button for closing the modal works only in IE and Firefox. However, it fails to work on Chrome and Safari browsers. It does work if I use the letter "x" instead of an icon within the button tag. But, I prefer using the font awesome icon for better design possibilities.

REQUEST FOR ASSISTANCE: I have limited knowledge of JavaScript and I'm unable to resolve this issue with the existing modal setup for my signup/login functionality.

Feel free to experiment with the Fiddle provided: https://jsfiddle.net/o5vpt6ck/

HTML:

    <div class="cd-signin-modal js-signin-modal"> <!-- This represents the complete modal form, including the background -->
        <!-- Code snippet continued... -->

JS:

(function(){
    //Login/Signup modal window - by CodyHouse.co
    // JavaScript code continues...
})();
javascriptcsstwitter-bootstrapbootstrap-4bootstrap-modal

Answer №1

Make sure to add the btn-js-close class and use it in your JavaScript condition.

Here is the code in action - JSFiddle

HTML Update:

<i style="position:absolute; top:-30px!important;" aria-hidden="true" class="btn-js-close text-white fas fa-times"></i>

JavaScript Update: 

if( hasClass(event.target, 'js-signin-modal') || hasClass(event.target, 'btn-js-close') ) {
                removeClass(self.element, 'cd-signin-modal--is-visible');
                event.preventDefault();
            }

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

Whenever I press a button, my desire is for each picture to seamlessly reposition itself in the exact same spot on the screen

Having some issues with my code. When I click a button, the plan is for the pictures to change one by one to simulate a traffic light sequence. However, when I run the code, all the pictures appear at once without any effect from the button. Any help in ac ...

javascripthtmlcss

Are we looking at a declaration of an arrow function? Is this concept even real?

I have been exploring the concept of function expressions versus function declarations with arrow functions. From my understanding, this is an example of an arrow function expression: const fred = greeting = () => { console.log("Hello from arrow ...

javascriptarrow-functionsfunction-expression

AngularJS: Controller causing an unchecked error

I'm a beginner to AngularJS and I'm struggling to understand why I'm not getting a response when clicking the button. Any help would be greatly appreciated. I've reviewed other examples of controllers being used but I can't seem to ...

javascriptangularjscontroller

Incorporating Javascript .click() with Python Selenium Webdriver for Enhanced Script Functionality

Having trouble incorporating Javascript code into my Python Selenium script. The ".click()" method in Javascript is more efficient than Selenium. I need to translate this Javascript into Python, but I'm not familiar with JS : const MyVariable= $(&quo ...

javascriptpythonseleniumselenium-webdriverweb-scraping

Vue instance with non-reactive data

I am looking to store an object in Vue that will be accessible throughout the entire instance but does not need to be reactive. Typically, if I wanted it to be reactive, I would use 'data' like this: new Vue({ data: myObject }) However, since ...

javascriptvuejs2reactive-programmingvuex

Interactive selection menu with jquery technology

I am in the process of developing a dynamic dropdown feature using jQuery var rooms = $("<select />"); $(res.data).each(function () { var option = $("<option />"); option.html(this.name); op ...

javascriptjquery

Looking to achieve a mouse over effect in jQuery?

For the past few days, I've been grappling with a question that I just can't seem to find the right answer to. I'm trying to create a mouseover effect similar to the one on this template (the Buddha at the top of the page). Despite my best e ...

javascriptjquerycssmouseover

How to eliminate duplicate items in an array and organize them in JavaScript

I am looking to eliminate any duplicate items within an array and organize them based on their frequency of occurrence, from most to least. ["57358e5dbd2f8b960aecfa8c", "573163a52abda310151e5791", "573163a52abda310151e5791", "573163a52abda310151e5791", "5 ...

javascript

Establish map boundaries using the longitude and latitude of multiple markers

Utilizing Vue, I have integrated the vue-mapbox component from this location: I've made sure to update the js and css to the latest versions and added them to the index.html: <!-- Mapbox GL CSS --> <link href="https://api.tiles.mapbox.com/m ...

javascriptvuejs2mapbox-gl-js

Issues arise when attempting to retrieve information in NextJS from a local API

One of my coworkers has created a backend application using Spring Boot. Strangely, I can only access the API when both our computers are connected to the same hotspot. If I try to access the other computer's API and port through a browser or Postman, ...

javascriptnext.jsaxiosfetch

Make sure to close any existing Featherlight windows before trying to open another one

I'm setting up multiple featherlight instances when the page loads jQuery('.feedback').featherlight(jQuery( "#feedback-box" ), { closeIcon: 'close'}); jQuery('#imprint').featherlight(jQuery( "#imprint-box" ), { closeIcon ...

javascriptjqueryfeatherlight.js

Using a data() object in Vue to fill out form fields efficiently

My data retrieval process from mongodb involves obtaining the data and transferring it to the client side using the following approach: error_reporting(E_ALL); ini_set('display_errors', '1'); require '../vendor/autoload.php'; ...

javascriptvue.jsvuejs2

Provide net.socket as a parameter

What is the best way to pass the net.socket class as an argument in this scenario? Here's my code snippet: this.server = net.createServer(this.onAccept.bind(this)); this.server.listen(this.port); } Server.prototype.onAccept = function () { // Ho ...

javascriptnode.jssockets

Navigating to a different page by clicking on a Table Row in react-table

Whenever I click on a table row, I am unable to navigate to another page. Although I have successfully implemented the getTdProps function to retrieve properties from the table row upon clicking on it, I'm facing difficulty in using 'react-route ...

javascriptreactjsreact-routerreact-table

Steps to modify the CSS of a custom component in Angular 8

I have been attempting to override the css of a custom component selector, however, my attempts have been unsuccessful. I have tried using ":ng-deep" but it hasn't worked. How can I go about finding a solution for this issue? app.component.html: < ...

csstypescriptangular7angular8

Having trouble retrieving the $_SESSION variable accurately from AngularJS

I am working with angularjs and need to retrieve a php session variable. I have created a php file named session.php with the following content: $_SESSION['phone'] = '55551864'; return json_encode($_SESSION['phone']); In my ...

javascriptphpangularjssession

Elevate the block when encountering errors in HTML/CSS

Here is a picture of what I want, and below I will provide a more detailed description: Link to the image (I cannot paste it here) I am explaining the elements involved. There are three main components: 1) The topmost text "Bla bla bla bla" 2) The butt ...

htmlcsswebfrontend

Using jQuery Validation and AJAX to update a table row

I have created a table with an edit button for each row that triggers a bootstrap modal when clicked. The modal contains a form populated with information from the table. There is also a submit button on the modal to update the table data. To validate the ...

jqueryajaxjquery-validatebootstrap-modal

Implementing customized line breaks in PHP using custom fields

My knowledge of PHP is quite limited, so I prefer to seek advice from experts before attempting anything I find online. I recently installed a customized billing field plugin in order to collect additional billing information during the checkout process. ...

phpcssmysqlhtml-helperbreak

What is the process of connecting two models in Mongoose?

In this scenario, we have two models - ProductModel and CategoryModel. The goal here is to establish a connection between creating a product (ProductModel) and assigning it to a category. The issue arises when the category field is not getting filled in t ...

javascriptnode.jsmongodbexpressmongoose