The animatedModal.js dialog box is causing the link to be unclickable, despite having a z-index of -9999

I am currently utilizing animatedModal.js for creating simple dialog boxes on my website. Everything is functioning perfectly, except for one issue - I am unable to click on the link to my logo at the top of the page because the modal with opacity:0; z-index:-9999; is blocking it. Even though the modal is hidden behind other elements and has an opacity of 0, it somehow remains in front of the logo. The logo has a z-index of 100, but the invisible modal still takes precedence.

Unfortunately, I couldn't find an online version of animatedModal.js (such as on cdnjs.com) to create a fiddle. However, you can visit my webpage here:

  • The full site
  • You can also view the animatedModal.js on my site
javascriptjqueryhtmlcss

Answer №1

The issue at hand is fairly straightforward. The problem lies in the confusion surrounding the z-index. While I may not have all the details on where exactly you set your z-index, there are two instances that are key:

  • Your anchor tag with a class of "logo" has a z-index of 100.
  • On the other hand, your div tag with a class of "content" boasts a z-index of 200.

Essentially, this indicates to the browser that you intend for your content to always appear above your anchor tag. Bearing this in mind, let's delve into how you've configured the z-index for the modal.

  • Your modal currently sports a z-index of -9999, which is in relation to its parent element (content) => effectively rendering it a z-index of 200 (-9999).

This essentially means that regardless of the z-index assigned to the logo, the modal will always take precedence:

In short: To resolve this, adjust the z-index of the content to be lower than that of your anchor tag. Alternatively, consider reorganizing your DOM structure as the modal doesn't necessarily need to be positioned beside the link trigger. Opting for the latter approach may result in the z-index of the anchor tag coming into play.

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

Executing a function within the constructor in Angular 2/IONIC 2

I am new to Angular 2 and I have a question regarding invoking a child method from the current constructor. Is it possible to call the getPosition method from the constructor? I attempted to do so, but encountered an exception stating "getPosition is not ...

javascriptangulartypescriptionic2

Fuzzy text in drop-down box on Chrome, clear on Firefox

I've encountered an issue with a dropdown menu in Google Chrome where the content appears blurry, while it displays correctly in Firefox. The problem arises when the dropdown exceeds a certain height, and I've tried setting a max-height with over ...

javascripthtmlcssgoogle-chrome

Using three.js to set the HTML background color as clearColor

How can I set the HTML background as clearColor using three.js? Here is the code snippet for three.js: // Setting up the environment var vWebGL = new WEBGL(); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / ...

javascripthtmlthree.jshtml5-canvas

What is preventing me from specifying a maximum width for Instagram iFrames in my scss files?

Managing the width of my Instagram embeds has been a challenge for me. I attempted to set a max-width in my scss files, but for some reason, it never seems to be applied. The only way I can actually get it to the desired width is by using the inspector and ...

htmlcsstailwind-css

Is there a way to make a JQuery "click" function function without needing to use a random alert before it?

Apologies for the vague title, I was struggling to summarize my question concisely. I have a JQuery script that performs two AJAX calls to retrieve XML data. Despite the code being relatively simple, I've encountered a common issue known as a race con ...

jqueryclickalert

Vue project encounters disappeared DOM element

I'm currently developing a code typer, but I've encountered an issue where the element inexplicably turns into Null. Despite having some experience with Vue from my previous project on Django/Python at (live preview), I find myself struggling to ...

javascriptvue.js

Mixing Module Federation with different React versions and individual CSS isolation

In my setup, the module federation remote repository is: developed using react 17 utilizing material-ui 4 with jss incorporating global CSS from third-party libraries that cannot be modified Meanwhile, I have several hosts that consist of: different ver ...

cssreactjsmaterial-uiwebpack-module-federation

Show a notification when utilizing AJAX requests

I consist of two separate files: one written in PHP and the other one in JavaScript and HTML. PHP file : <?php session_start(); //start session $_SESSION['data'] = "The content should be displayed as alert in the JS file"; JS/HTML File: & ...

javascriptphpjqueryhtmlajax

Jade iterates over each object element, assigning its children to their respective parent elements

I have a JavaScript Object named "boards". [{"id":1,"parent_board":0,"title":"Lorem 1","description":"ec40db959345153a9912"}, {"id":2,"parent_board":0,"title":"Lorem 2","description":"bb698136a211ebb1dfedb"}, {"id":3,"parent_board":1,"title":"Lorem 1-1"," ...

javascriptnode.jsexpresspug

loading a dynamic grid using Ajax with jQuery

Setting up a jquery grid on a standard webpage gridPage.html involves incorporating HTML and JavaScript code as follows: $("#gridtable").jqGrid('setGridParam', { data: [ {'type': 'aType', ...

javascriptjqueryajaxjqgrid

issues with jquery's .each() method not functioning properly

I am looking to iterate over each item in lists and then each list within lists to calculate the number of items in list if the number of items in list is 3, I want to display an alert with the value of each item JSON Data { "lists":[ { ...

javascriptjqueryjson

Execute iMacros Loop and terminate the process before proceeding to the next command

As a newcomer to the world of iMacro scripting, I am struggling with setting up a simple data scrape. I'm looking for guidance on how to create a loop for the following commands: URL GOTO=link1 URL GOTO=link2 URL GOTO=link3 WAIT SECONDS=7.5 Once th ...

javascriptloopsimacros

Display my additional HTML content on the current page

Is it possible for my addon to open a predefined html page in the current window when it is started? And if so, how can this be achieved? Currently, I am able to open my addon page in a new window using the following command: bridge.boot = function() { ...

javascriptjqueryhtmlfirefoxfirefox-addon

Why are JS & jQuery's inArray() and indexOf() functions not functioning correctly when indexes are strings?

Here is an example of an array: var arr = []; arr['A string'] = '123'; arr['Another string'] = '456'; I am attempting to find the index of either '123' or '456'. Both methods below are returnin ...

javascriptjqueryarraysindexof

What is the best way to eliminate concealed divs from the view source of a webpage?

On my HTML page, I have some hidden DIVs that can still be viewed in the page source. I want to ensure that these DIVs are not visible to users when they inspect the page source. Is there a way to achieve this using Javascript or another solution? ...

javascriptphphtml

Does the Parent Tag style override the child tag style when hovering?

I am currently dealing with some style issues. How can I apply the styling of the parent tag to the child tag when hovering over it? Let's illustrate this with a simple example. .outer:hover { background: yellow; z-index: 1; position: relativ ...

htmlcss

The functionality of the jQuery autocomplete textbox seems to be malfunctioning when used in conjunction with an update panel

Having trouble getting the result after unloading jQuery? How do you reload it when the update panel is updated? Any solutions to overcome the issues with jQuery and the update panel? <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.a ...

javascriptc#jqueryasp.net

Using MongoDB to filter and search within an array using both the $in operator and regular

My challenge involves working with 2 collections, where I'm attempting to retrieve all records from Coll_A where a specific field (Field1) is not present in Coll_B. The complicating factor is that the Field1 in Coll_A</code has trailing white spac ...

javascriptmongodb

Why isn't the Head component producing any visible results in the DOM when using Next.js?

Struggling to get the <Head> component working, but it's not reflecting any changes in the DOM. Take a look at my page.js: import Head from 'next/head' export default function Home() { return ( <> <Head> & ...

javascriptreactjsnext.js

Having trouble with CSS transitions in a Next.js or Tailwind application?

"use client"; import React, { useState } from "react"; import Image from "next/image"; import Link from "next/link"; const NavigationBar = () => ( <div id="navbar"> <Link href="/">Home</Link> <Link href="/about">About& ...

javascriptreactjsnext.jsecmascript-6tailwind-css