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.

https://i.sstatic.net/yXnwA.jpg

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

2 unique personalized classes with individualized modifications

Is it feasible to create 2 distinct custom (a tag) classes, each with unique class names? For Instance: When I try to use these in my HTML code, I struggle to create 2 different styles for (a tag) with different names! <a class="type1" href="#">te ...

htmlcss

The onload function in jQuery is not functioning properly when the page is refreshed

I'm just starting out with jquery and I have a simple project in mind. The idea is to have two pictures stacked on top of each other, but I want the page to start showing the second picture first (at a specific scroll point). Then as the user scrolls ...

javascriptjqueryhtmlcssonload

Save the ID of the list item by wrapping it and storing it in a table cell

I need help with a situation where I have a list of items stored in table cells, and each cell contains a list item. My goal is to save the id of each list item into the cell that contains it. For example: <td><li id='itemID'>content ...

javascriptjqueryhtml-table

the menu didn't glide into view

I'm currently working on implementing a stylish menu For this project, I am following a helpful guide that instructs to create the HTML in a single file. The issue is that the menu isn't sliding smoothly as expected. Here is the HTML code - no ...

jqueryhtmlcssmenu

VueJS throws an error when trying to access the 'settings' property of an undefined object

I'm encountering an issue with my basic input in a Vue component. The input should update data on change, but instead I'm getting the error message Uncaught TypeError: Cannot read property 'settings' of undefined Vue component <templ ...

javascriptvue.js

Updating Angular JS views in real-time using database changes

I am currently in the process of building a social networking application using AngularJS. I have come across an issue regarding data binding. In my app, there is a timeline div where all the recent posts are displayed, along with a status updater at the t ...

javascriptajaxangularjs

conversion of markdown into a JSON object

Upon importing a markdown file into a node module using a webpack loader, I encountered an issue. The imported file is a text book with chapters separated by h2 tags. I am seeking a solution to convert this markdown file into a JSON object where each h2 t ...

javascriptjsonnode.jsconvertersmarkdown

How can JavaScript transform Unicode strings?

<i class="icon">&#xe672;</i> This code will display an icon like this: > However, when I render it in Vue: <i class="icon">{{a}}</i> a = '&#xe672;' The result is  It displays as a string! ...

javascriptvue.js

What is the best method to dynamically navigate through JSON data and save an object at a specific level?

Here is an example json structure for a menu: { "menu": [{ "name": "vegetation", "id": "1", "children": [ { "name": "landuse", "id": "1.1", "children": [ ...

javascriptjqueryjson

Tips for designing a webpage where a div element adjusts to fit the screen, regardless of the width of the content inside

Can CSS3 or a JavaScript library be used to create a webpage with a div that contains content wider than the screen, such as a large image or newsletter, and still fits it to the screen without scrolling or clipping any content? Below is an image demonst ...

csshtml

Guide on converting this function into a computed property within Vue

Is it possible to concatenate a fixed directory path, which is defined in the data property, with a file name that is determined using v-for? I encountered an issue when attempting to do this using a computed property. The error message displayed was: ...

javascriptvue.jsvuejs2

Exploring and extracting values from nested arrays of objects in JavaScript and React

Hey there, I am having trouble getting the data from the backend server to display on a chart library. Can you please take a look at my code and help me out? const data = [ { id: "americano", data: [{x: "10",y: 10,}, {x: &quo ...

javascriptreactjsfor-loopchartsheatmap

How to retrieve the clicked value using jQuery within a jinja2 loop

I'm currently working on an app that utilizes a Flask backend and Jinja2 templating. Within the HTML, I have a loop set up to organize data into batches, creating three columns on the web page: {% for batch in df.iterrows() | batch(3) %} <d ...

javascriptjqueryhtml-listsjinja2

Trigger JQuery function post CSS styling completion

Upon using $(document).ready(function() {...}, it seems that the function is invoked after the DOM has loaded, but potentially before CSS styles have been completely applied. My goal is to obtain the width of a particular element. Strangely, when attempti ...

jquerycss

Determine the data type of a string without needing to convert it

Can you determine if a value is numeric without casting it? For example, how can you differentiate between 'abc' and '123' without converting them to a specific data type? While visually apparent that 'abc' is not numeric, t ...

javascriptlodash

What could be the reason for esbuild not being included in the installation process of a fresh Rails 7 application that

After initiating a fresh Rails 7 app, I utilized the command line syntax: $ rails new app_name --css=bootstrap An error occurred during app creation specifically when including --css=bootstrap: Install esbuild run yarn add esbuild from ".& ...

cssruby-on-railsbootstrap-5ruby-on-rails-7esbuild

Types with conditions but no common parameter

I am looking to define my props as either type A or B. For instance export default function App() { type Checkbox = { type: "checkbox"; checked: boolean; }; type Dropdown = { type: "dropdown"; options: Array<an ...

javascriptreactjstypescript

Creating a process to automatically generate an input field upon the selection of checkboxes

Is there a way to automatically generate a text field for each checked box in a dynamically changing checkbox list? Below is my code snippet: <div> <label> Products </label> <li ng-repeat="item in INDproducttypes"> ...

javascripthtmlangularjsangularjs-ng-repeat

Tips for utilizing an adaptive design with Angular

I am working on designing a page that allows for scrolling if needed. On each section of the page, I will be incorporating specific components with unique colors to enhance the layout. However, my current HTML code is not producing the desired result as sh ...

htmlcssangular

What is the best way to retrieve a nested element from a JSON object using AngularJS?

Take a look at this Plunkr demonstration that showcases the ng-repeat functionality with a JSON file: Plunkr The code snippet below shows how I am displaying elements from $scope.foodlist: <li ng-repeat="food in foodlist"> ...

javascriptjsonangularjs