Learn how to direct the focus onto the close button when using a Bootstrap modal with content displayed as an image link and an overlapping

My modal contains an image-link with an overlapping close button. Unfortunately, the close button is not receiving focus - instead, the link is being clicked. I've made some adjustments but can't seem to get the close button focused while maintaining the functionality of the full image link. Any guidance on how to achieve this would be appreciated.

$("#adModalLarge").modal("show");
.modal-full .close {
  position: absolute;
  top: 5px;
  right: 25px;
  font-size: 60px;
  font-weight: bolder;
  transition: 0.3s;
  z-index: 9!important;
  opacity: 0.6;
}

.modal-lg .close {
  position: absolute;
  top: 5px;
  right: 25px;
  font-size: 40px;
  font-weight: bolder;
  transition: 0.3s;
  z-index: 9!important;
  opacity: 0.6;
}

.close:hover,
.close:focus {
  opacity: 0.9!important;
  text-decoration: none;
  cursor: pointer;
}

.viewindex {
  z-index: 999999999!important
}

.modal-full {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  margin: 0;
}

.modal-full .modal-content {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div aria-hidden="true" aria-labelledby="adModalLargeLabel" class="modal fade pl-0 viewindex" id="adModalLarge" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-full" role="document">
    <span class="close" data-dismiss="modal">×</span>
    <a href="https://www.example2.com" target="_blank"><img src="https://www.insaid.co/wp-content/uploads/2019/10/2-1.png" alt="" class="modal-content"></a>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
htmlcssbootstrap-modal

Answer №1

To fix the issue, you should eliminate the line pointer-events:none; from the CSS rule for .modal-dialog

$("#adModalLarge").modal("show");
.modal-dialog {
  pointer-events: auto !important;
}

.modal-full .close {
  position: absolute;
  top: 5px;
  right: 25px;
  font-size: 60px;
  font-weight: bolder;
  transition: 0.3s;
  z-index: 9!important;
  opacity: 0.6;
}

.modal-lg .close {
  position: absolute;
  top: 5px;
  right: 25px;
  font-size: 40px;
  font-weight: bolder;
  transition: 0.3s;
  z-index: 9!important;
  opacity: 0.6;
}

.close:hover,
.close:focus {
  opacity: 0.9!important;
  text-decoration: none;
  cursor: pointer;
}

.viewindex {
  z-index: 99999 !important
}

.modal-full {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  margin: 0;
}

.modal-full .modal-content {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div aria-hidden="true" aria-labelledby="adModalLargeLabel" class="modal fade pl-0 viewindex" id="adModalLarge" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-full" role="document">
    <div class="close" data-dismiss="modal">×</div>
    <a href="https://www.example2.com" target="_blank"><img src="https://www.insaid.co/wp-content/uploads/2019/10/2-1.png" alt="" class="modal-content"></a>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

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

Upon locating the leaf route at location "/", it was discovered that said route was missing an element

There is a matched leaf route found at the location "/", but it does not have an element attached to it. As a result, it will render an <Outlet /> with a null value by default, which leads to an "empty" page being displayed. I am seeing t ...

javascripthtmlcssreactjs

"Responsive modal with dynamic height based on percentage and a minimum height constraint

My goal is to design a modal dialog that adjusts its height based on a percentage of the browser window height. The modal should maintain a minimum height to ensure it doesn't become too small, and it should dynamically grow, shrink, and re-center as ...

jqueryhtmlcss

spill the elements from one div into another div

I'm facing a situation where I have 2 divs on a page, with the first div containing text content only. The issue is that when the content of the first div overflows, it gets cut off due to the CSS applied to it: .one { overflow: hidden; width: 1 ...

javascriptjqueryhtmlcss

Learn the steps to include an HTML checkbox in an AJAX HTML editor

I need help with adding an HTML checkbox to an Ajax HTML editor in ASP.NET. I have attempted to do this but am having trouble checking and unchecking it. Below is the code snippet that I have tried. Any suggestions would be greatly appreciated. webform.as ...

htmlasp.netajax

Can TypeScript React apps be styled using a style.ts file?

Exploring the world of TypeScript and encountering a new challenge - I've been tasked with styling my app using a style.ts file. Are you wondering if this is possible or how to go about it? Seeking a comprehensive answer on the feasibility of this app ...

cssreactjstypescript

Tips for applying CSS to background images

Just working with one div here <div id="particles-js" > and in my CSS, I've got this: #particles-js{ width: 100%; height: 100%; background-color: #b61924; background-image: url("../js/image.jpg"); background-size: cover; backg ...

htmlcss

Is there a way to have the span update even if the input stays the same? Currently, it only changes when the input is different

Retrieve results of 3 lines (Ps) by entering a word in the text area and clicking search. If the word is found after clicking the button, a span will be displayed with the count of occurrences as well as the highlighted P(s) where it was found. If the wo ...

javascripthtmlcss

Learn how to dynamically incorporate multiple Bootstrap collapse elements in PHP

I've encountered an issue with my code that contains both HTML and PHP. The problem arises when there are multiple elements in a collapse, as only the first element works properly. This is due to the fact that each element has the same id named "colla ...

javascriptphpcsstwitter-bootstrap

Creating a custom PHP header file that dynamically includes .js and .css files based on the page

Is there a more efficient way to dynamically include .css and .js files in the head tags of my header.php, based on the current open .php file? This would help reduce loading time by only including necessary files for each specific page. I've been co ...

javascriptphpcss

AngularJS: Showcase HTML code within ng-view along with its corresponding output displayed in a navigation format such as Html, Css, JS, and Result

Currently, I am working on a web application. One of the screens, screen-1, consists of a series of buttons labeled 'Code'. When a user clicks on any of these buttons, it loads a different HTML page, screen-2, in the ng-view using $location.path( ...

javascripthtmlcssangularjs

Convert a fixed Jquery div to absolute positioning when it reaches the end of the page

I've implemented a Jquery code that adds a fixed class to a div when scrolling down. However, I now want to remove this fixed class when it reaches the bottom of the page and replace it with a new one that includes position:absolute; and margin-bottom ...

jquerycss

Checking Form Entries with the Power of FOR Loop in JavaScript

Can someone assist me with implementing JavaScript for form validation using a for loop within the JavaScript code? I have a form with 5 fields for usernames and passwords, and I need to use JavaScript to validate the form before submitting it to the data ...

javascriptphpjqueryhtmlvalidation

JavaScript issue causing unexpected behavior in top and left positions

I've been experiencing an issue with my JavaScript code on an HTML file. Despite changing the top or left values, the image does not move as expected. I've spent hours searching for a solution and even tried copying tons of different code snippet ...

javascripthtmlcss

Packages have gone astray post node_modules scrub

I encountered an issue with npm run watch getting stuck at 10%, so I took the step of deleting the node_modules directory and package-lock.json. However, it seems that I may have installed modules using npm install without the --save-dev option. Even after ...

cssvue.jsnpm

What causes the text node to be visible on top of the background of the element it is overlapping with?

Consider this basic HTML structure: div { box-sizing: border-box; color: white; font-size: 28px; height: 100px; width: 200px; } #a { background: blue; padding-top: 40px; } #b { background: green; margin-top: -100px; } <div id="a" ...

htmlcss

Adjust the height of images to be consistent

I'm currently working on creating a grid layout with 4 images in a row using DaisyUI card component. However, I've run into an issue where there is white space at the bottom of some images due to varying image heights. Is there a solution that wo ...

javascripthtmlcssfrontendtailwind-css

Javascript callback function cannot access variables from its parent function

As a Javascript newbie, I am currently diving into callbacks for my project. The goal is to retrieve address input from multiple text boxes on the HTML side and then execute core functionalities upon button click. There are N text boxes, each containing an ...

javascripthtmlcallback

Ensure all boxes have equal heights

I'm using Boostrap 5 and I have four boxes that are not cards. How can I ensure they are the same height, considering the dynamic content? You can access the Codepen for more information: https://codepen.io/Deluxe23/pen/gOXJWwG Below is an excerpt o ...

htmlcsstwitter-bootstrapbootstrap-5

Retain the spaces within a string in Java and JavaScript programming languages

My Java code sends data to the browser via an HTTP request, and the output looks something like this: JAVA CODE OUTPUT | Id | Operation | Name | Rows | Bytes | Cost (%CPU)| Time | | 0 | SELECT STATEMENT | | | | 3 ...

javascriptjavahtmlcssangularjs

Steps for showing the text entered into the input box as soon as it is typed:

I am attempting to create a feature where text is displayed as soon as it is typed into an input box. Currently, my JavaScript function is not working at all. I simply want the function to display text when it is typed into or erased in the text boxes. & ...

javascripthtmlcssformsinput