What is the best way to ensure that links on top of background images are clickable?

I apologize if this question has already been addressed, but I have attempted some solutions that were recommended and none have been successful for me so far.

My issue lies in trying to add clickable links on top of a background image within a div element. Unfortunately, the links are not currently functioning as intended, and I am unsure of where the problem lies.

Below is the code I have developed thus far:

import '../../stylesheets/new_style.scss';

import React, {Fragment, useReducer, useState} from 'react';
import {Button, Col, Row, Modal} from 'react-bootstrap';


const NewGreeting = props => {
  
      return (
      <div className="full-page">
        <Modal.Dialog>
          <Modal.Body>
           <p> Modal Content Here </p>
          </Modal.Body>
        </Modal.Dialog>

       <div className='trial text-center'>
        <a href="https://google.com">test</a>
       </div>
      </div>
      );
};

export default NewGreeting;

Additionally, here is my CSS code:

.full-page {
  background-image: url("./hello.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  }

.trial{
  display: block;
  color: #474747;
  font-size: 2.1em;
  margin-top: 50vh;
}

Answer №1

(Transitioning my comment into a response:)

The issue lies with the <Modal.Dialog> component which has a specific behavior causing it to dominate the page, rendering the rest of the content non-interactive - your <div> containing links is positioned outside the <Modal> dialog. To resolve this, simply relocate your links inside the <Modal.Body> so they regain their interactive functionality.

Here's how:

import '../../stylesheets/new_style.scss';

import React, {Fragment, useReducer, useState} from 'react';
import {Button, Col, Row, Modal} from 'react-bootstrap';


const NewGreeting = props => {
  
      return (
      <div className="full-page">
        <Modal.Dialog>
          <Modal.Body>
           <p> Modal Content Here </p>

           <div className='trial text-center'>
             <a href="https://google.com">test</a>
           </div>

          </Modal.Body>
        </Modal.Dialog>
      </div>
      );
};

export default NewGreeting;

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

Is there a way to leverage the useSWR hook for making numerous requests simultaneously?

I am attempting to utilize the useSWR hook for multiple calls, but I keep encountering an error message that reads: Cannot read properties of null (reading 'destroy') async function FetchApi(url) { const response = await fetch(url); const ...

The iPhone has a unique feature that allows users to scroll through images horizontally,

Is it possible to create an HTML div container with some CSS tricks that can display a horizontal scrollbar similar to the one seen on iTunes preview screenshots, specifically for Safari on iPhone? For example: I am looking to use this feature to showcas ...

Customizing Navbar or other elements in react-bootstrap

While working on my react project, I have been using react-bootstrap. However, I am interested in delving deeper into all the features that this framework has to offer. I have come across pages supported by react-bootstrap and even downloaded templates, bu ...

What is the best way to show an error message on a webpage using jQuery within a PHP environment?

I have a form in HTML that includes a submit button for posting status on a page. When a user clicks the submit button without entering anything into the form field, I want PHP to display a simple error message on the same page saying "This status update s ...

I attempted to implement a CSS and Typescript animation for a sliding effect, but unfortunately, it isn't functioning

So I'm encountering an issue with this unique ts code: {/* Mobile Menu */} <div className="lg:hidden"> <button className="flex items-center w-8" onClick={toggleMenu}> {isMobileMenuOpen ? ( ...

How can I permanently disable a Bootstrap button on the server side using PHP after it has been clicked once?

I am in search of a way to disable a bootstrap button permanently after it has been clicked once. While I am aware of how to achieve this on the client side using JavaScript, the button becomes enabled again after the page is refreshed. I am now looking ...

How to add icons to HTML select options using Angular

Looking for a way to enhance my component that displays a list of accounts with not only the account number, but also the currency represented by an icon or image of a country flag. Here is my current component setup: <select name="drpAccounts" class= ...

The hyperlinks on the webpage are not functioning

I am encountering an issue with a link on a particular page. When scrolling down, the link works perfectly; however, when I attempt to scroll up, it remains in the same position. Here is a snippet of the code: (function($){ /* Store the original positions ...

Dealing with Cross-Origin Resource Sharing (CORS) Issue in React Frontend and Flask Backend While Uploading Numerous

My frontend was built using ReactJs and the backend was developed with Python Flask, which consumes a CNN model for making predictions. When I send around 5 to 6 images as my request, everything works fine. However, when I try sending 10 to 15 images and i ...

@page Css not displaying properly on the Mozilla Firefox browser

In order to fulfill my requirement, I need to ensure that there is a consistent 10cm margin on all pages when printing. Printing on my web page involves utilizing the window.print() function. However, due to the dynamic nature of the content, the number o ...

Filtering HTML tables to display only one instance of each value

I have a 300x11(rowXcolumn) html table that I wanted to filter like Excel or Google Sheets's filter. Upon researching, I came across the code below on a website. While it works as desired, there is an issue where it displays the same value multiple ti ...

Tips for arranging 3 tables in the right place using CSS

I have 3 tables that I utilize. My goal is to: have one on the left side of the page place one in the center of the page position one on the right side All at the same height. The issue arises when the tables expand and using float causes them to ...

What is the best way to use jQuery to emphasize specific choices within an HTML select element?

Seeking help with jQuery and RegEx in JavaScript for selecting specific options in an HTML select list. var ddl = $($get('<%= someddl.ClientID %>')); Is there a way to utilize the .each() function for this task? For Instance: <select i ...

Exploring how to utilize layer services in React js to make axios requests without the need for token authorization headers

Before, the header used to be like this: const token = Cookies.get("token"); const headers = { Authorization: `Bearer ${token}` }; However, now I have created a service where I initialize axios as shown below: export const api = axios.create({ ...

"Exciting Changes in Color According to the Active State of vue-route-link

I am trying to find a way to customize the CSS based on whether a link is exact or active. Essentially, when a user clicks on a menu item, I want the underline to change depending on whether the link is an active router-link. Although I was able to accompl ...

Unable to create adjacent buttons using display:inline-block

I'm using Angular to dynamically create buttons, but they are stacking vertically instead of appearing side by side <div *ngIf="response"> <div *ngFor="let hit of response.hits.hits"> <button class="btn btn-primary" role="butt ...

When the window size is reduced (smaller than a page width), the layout of the page becomes distorted

Check out my cool header: <head> <link href="/css/header.css" rel="stylesheet" type="text/css"> </head> <body> <div id="background"><img src="/multi/background.jpg" width="100%" height="100%" alt=""&g ...

Is it possible to apply capital spacing in CSS for OpenType fonts without using font-feature-settings?

Is it possible to adjust capital spacing (cpsp) for an element without impacting any other applied OpenType features? Unfortunately, utilizing the font-feature-settings is not a viable solution. For example, if we use font-feature-settings: 'cpsp&apo ...

Exploring the versatility of complex data types within a MaterialUI drop-down menu: Prioritizing focus, seamless toggling

Edit: I have revised this to make the problem clearer. I am attempting to create an accessible drop-down menu using Material UI where the Menu options consist of elements like check boxes and switches. To ensure accessibility and usability, it must meet t ...

Is it possible to deploy an app without having NodeJS in the root directory?

As I prepare to deploy my first project, I find that most people use npm run build from the root package.json. However, in my case, I have separated the backend and frontend within the root folder. What steps should I take? Should I run npm run build fr ...