Ways to make a div non-clickable disappear without using JavaScript - A guide on "lightboxing" a div

I would like the score's div to pop up as a lightbox when clicking on this link :

<a href="#test">TEST</a>

However, I do not want it to disappear when clicking on the div itself, only on the black background!

Here are my attempts:

<a id="test" href="#">
  <div id="details">
    Multiple scores! : <br>
    Test #1: 16/20<br>
    Test #2: 11/20<br>
    Test #3: 17/20<br>
    Test #4: 14/20<br>
    Test #5: 15/20<br>
  </div>
</a>

However, as shown in this fiddle, we can click on the lightbox to make it disappear... : http://jsfiddle.net/apr4Ln3j/

And without using JS, which unfortunately I'm not allowed to use --'

htmlcss

Answer №1

When you click on either the background or the image box in the example you provided, it will close.

You can experiment with the pointer-events property

JSFiddle

I have adjusted your Fiddle to make the box clickable while keeping the background non-clickable using this property. Although this is the opposite of what you wanted, this change may help guide you towards achieving your desired result.

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

What are the steps to restrict the scope of a <style> declaration in HTML?

Currently, I am in the process of creating a user interface for a webmail. Whenever I receive an email, I extract its content and place it within a <div> element for display purposes. However, one challenge that I am facing is that each email contain ...

javascripthtmlcssstylesheet

Add a stylish border to your image within a container of fixed width

I am facing a challenge with a fixed width DIV element. Inside this element, there is a second DIV containing only an IMG element. My goal is to add a border to the image without exceeding the boundaries of either of the enclosing DIV tags. Solution #1: ...

cssimagehtmlborder

The categorization of items into arrays according to selections made with radio buttons is producing varied outcomes

I currently have two groups of radio buttons: One for attendance with values "yes" and "no" Another for dietary choices with values "Vegetarian / Vegan" and "Non-vegetarian" The dietary fields are only displayed if the user selects "yes" for attendance. ...

javascripthtmljqueryarrays

Embarking on the journey of nesting components within styled-components

Check out these custom components I created: <UserImg imgUrl={userPhoto}> <DropDown> <div onClick={handleAuth}>Sign Out</div> </DropDown> </UserImg> const DropDown = styled.div` letter-spacing: 0.2em; positi ...

cssreactjsstyled-components

The client continues to request the file through the REST API

I have noticed a behavior with an audio file stored on the server that clients can request via a REST API. It seems that every time the audio is played again, a new request is sent to the server for the file. Is there a way to prevent this or cache the dat ...

javascripthtmlnode.jsexpress

Choosing premier class and modifying characteristics

Looking for a solution to hide a div without modifying the HTML code directly? By using JQuery, you can manipulate the appearance of elements on a page. While it's possible to select the first instance of a class and retrieve its value, adding an attr ...

javascriptjquerycss

Change the text inside a container without losing any associated event listeners using JavaScript or jQuery

Here is the HTML code: <div id="div001"> This is ${Row.1}. <p>${Row.2} explain something else.</p> <p>${Row.3} welcome you. <span>${Hello.World}, this is a new world.</span></p> </div> My objective is ...

javascriptjqueryhtml

Building a dynamic hierarchical list in Angular 8 with recursive expansion and collapse functionality

I am attempting to construct a hierarchical expand/collapse list that illustrates a parent-child relationship. Initially, the parent nodes will be displayed. If they have children, a carat icon is shown; otherwise, a bullet icon appears. When the carat ico ...

htmlangulartypescript

What is the best way to eliminate extra space at the bottom of glide.js?

Looking for assistance to eliminate the whitespace at the bottom of an image or slider. Can anyone help? Here is a preview of the image: https://i.stack.imgur.com/mEYY3.png If you'd like to take a look, here is the project code link: I had to down ...

javascripthtmlcssglidejs

What is causing my Bootstrap Controls to malfunction?

I'm trying to create a Bootstrap carousel that shows 3 items at once and includes controls to switch between them. The carousel I've made does display the three items, but for some reason, the controls are not responding when clicked. I'm un ...

javascripthtmlcsstwitter-bootstrapbootstrap-carousel

How can CSS be used to print multiple pages without any margins? And what is causing this slight extra height in the output

Check out the Live Demo here, apologies for the messy CSS as I have been experimenting with different styles. I am currently attempting to print PDF files using the browser's print dialog. Each file consists of 4 pages in the DIN lang format with an ...

htmlcssprintingmedia-queries

What is the best way to divide a Modal Header column into two separate sections?

Is there a way to center the text in the Modal Header and have the H1 and P tags occupy one row each? Applying d-block to each creates two columns. I also tried increasing the Height in the Modal Header without success. If you have a solution, please hel ...

htmlcssbootstrap-5

My website was unexpectedly adorned with an additional quotation mark by Chrome

Unexpectedly, Chrome inserted a quote that was not part of my code. Upon pressing F12 in Chrome, the added code is revealed. This extra quote caused a mysterious space at the top of my website. Removing the unnecessary quotes resolved the issue and everyt ...

phphtmlgoogle-chrome

Alert: An error message is displayed despite completing the required field

My apologies in advance as I am new to coding and there may be a glaring mistake in my current project. I am creating a survey that requires participants to enter their age. The demographic data questions are organized in a table format, with code borrowed ...

html

I am attempting to get a jquery plugin to function properly on my Windows 7 Internet Explorer IE7 browser. The plugin in question can be found at http://jvectormap.owl-hollow

I'm encountering some strange issues with my Internet Explorer IE7 browser on Windows 7. The jquery plugin I am attempting to use can be found at . Unfortunately, this plugin is not functioning properly on Internet Explorer IE7 on Windows 7, but it ru ...

javascriptjqueryhtmlcssinternet-explorer

Troubleshooting issue with jquery.backgroundSize.js on Internet Explorer 8

After trying out the jquery.backgroundSize.js plugin, I ran into issues getting it to work in IE8. I followed the steps from the official website and tested on various browsers like IE9 and Firefox, but nothing seemed to happen on IE8. css: #main{ b ...

jqueryhtmlcssinternet-explorer-8pie-chart

What is the best way to split a single column into two using blocks?

I am working with a container that currently has all its blocks lined up in a column. I need to divide them into two columns, with 5 blocks in each. Unfortunately, the plugin I am using generates the code for me and does not allow me to insert my own div e ...

javascriptcss

Responsive CSS Dropdown Menu - Divided into Two Columns

After searching for solutions in the support resources and experimenting with various techniques, I am struggling to divide this CSS Dropdown menu into two columns. The nav list is long enough that it extends below the fold. Although the menu adapts respo ...

jqueryhtmlcssdrop-down-menuresponsive-design

What is the process for integrating this graph using highcharts?

Check out this link for more information on investment decision-making. There is a visually appealing graph and pie chart featured in the section about Investment Decision-Making in 2016. After noticing that it was created using Highcharts, I wanted to c ...

javascripthtmlcsshighchartsfrontend

Tips for transferring data to index.html from Fetch API

Trying to transfer data from an API to my website has been a challenging task. The structure of my directories is as follows: project > server.js | public public > index.html | styles.css A snippet of my code in server.js shows the process: ...

htmlnode.jsreactjsexpress