Utilizing an overlay to conceal both the body content and the input fields

I have a website that includes a sliding overlay div which triggers when the user exits a specific area. To showcase this, I created a demonstration on jsfiddle.

http://jsfiddle.net/qxcd8y1L/

 <body class="overlay">
  <input>
 </body>    

 .overlay{
    position: absolute;
    opacity: ;
    width: 100%;
    height: 100%;
    background-color: #373737;
 }

Currently, adjusting the opacity affects the input fields and darkens them, which is not my intention. The overlay div properly displays over the elements as intended, but the issue lies in the visibility of input fields underneath it.

I understand that disabling window events to prevent clicking inside the input fields may seem like a solution, but users need access to interact with certain features, like closing the pop-up div.

I am looking for a way to attach the overlay to the body while ensuring that all input fields below are hidden. Despite my efforts in researching, I have not found an exact solution yet.

I am only using jQuery and CSS in my project, so any suggestions should stay within those parameters. Thank you!

jqueryhtmlcss

Answer №1

Solution: 1

To achieve the desired effect, you can utilize the :after pseudo-element in your CSS code.

body:after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #373737;
  left: 0;
  top: 0;
  opacity: 0.9;
}
<body>
  <input type="text" />
</body>

Solution: 2

Alternatively, you can create another div element with a class of .overlay for the same effect. You can then use jQuery to toggle the visibility of this overlay as needed.

.overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #373737;
  left: 0;
  top: 0;
  opacity: 0.9;
}
<body>
  <div class="overlay"></div>
  <input type="text" />
</body>

Answer №2

Check out the improvements I've made, it's now functioning perfectly.

I hope this information was useful to you.

Link to the updated code

This snippet includes an HTML file with some JavaScript functions:


<body>
  <div class="overlay" id="overlay">
   <button onclick="dismiss()" class="close-button">
    Close Overlay
    </button>
  </div>


   <div class="container">

     <input> 
   </div>
</body>    


<script>

    function dismiss(){
            $(".overlay").removeClass("on");
    }


    $(document).ready(function(){
            $(".overlay").addClass("on");
    });

</script>

Additionally, a bit of CSS was required for the functionality:

.overlay{
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: #373737;
  transition: 2s opacity;
  z-index:-1;
  display:flex;
}
.on{
  opacity: 1;
  z-index:2;
}

.close-button{
   align-self:center;
   justify-self:center;
   margin:auto;
}

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

Issue with Firefox mobile's camera functionality

I am facing an issue with my web app for mobile devices where I am trying to display the mobile camera using Firefox mobile browser. I am using nodejs with express as a server and connecting to the server via localhost with my smartphone. Although Firefox ...

javascripthtmlnode.jsexpress

After applying sorting, jqGrid displays an empty space below the final row

Having an unusual problem with sorting in the jqGrid. When I sort in descending order, there is extra space below the last row, but when I sort in ascending order, the table ends abruptly at the bottom without allowing any further scrolling. I have includ ...

c#jqueryhtmlsortingjqgrid

Tips for retrieving a td element from an HTML document

I have a variable containing HTML data and I need to extract a specific td element from it. When I use the alert(returnData) function, it displays the following output: <tr class='addedrow'> <td id="abc">DOM-001 <inpu ...

jqueryajax

I require assistance in clearing the text field under specific circumstances

Incorporated in my webpage are text area controls that have been coded to automatically create a bullet-list when the user clicks on the text area or presses the 'ENTER' key. However, there is an issue - if the user clicks on the text area withou ...

javascriptjqueryhtml

Changing styles using jQuery when hovering over an element

Here is an example of HTML code: <li> <p> <a href="#" class="link" ><img src="images/photo_cityguild_cropped.jpg" alt="Education" title="Education"> <span class="label">E D U C A T I O N</span> </ ...

jquery

When utilizing the Express framework, the object req.body is initially empty when collecting data from a basic

I'm encountering an issue where I receive an empty object in req.body when submitting my HTML form. This problem persists whether testing in Postman or directly submitting the form from localhost in the browser. Upon logging it in the node console, t ...

javascripthtmlnode.jsexpress

Can JavaScript be used to mimic selecting a location from the autocomplete dropdown in Google Maps API 3?

Currently, I am attempting to automate the process of selecting items from the autocomplete dropdown in the Google Maps API v3 places library using jQuery. However, I am facing difficulty in identifying the necessary javascript code to select an item from ...

javascriptjquerygoogle-maps-api-3autocompletegoogle-places

Steps to halt webkit animation within a div located inside a circle:

I have a series of nested circle divs, and I want to give them a pulse animation. The issue is that the text container is within one of these circles, causing the animation to apply to the text as well. I am unable to move the text container due to potenti ...

javascriptjqueryhtmlcss

Is there a way to align the image block-grid from left to right?

Is there a way to change the alignment of images in the x-block-grid four-up class to be RTL on this page? () I have managed to make the h2 tag RTL using the following code: <h2 class="h-custom-headline h5 accent" dir="rtl"><span>Code</spa ...

htmlcssalignment

At what point is the ajax call considered fully executed?

Whenever a client makes an AJAX call, they upload data to the server (HTTP request) and then receive data from the server (HTTP Response). Once the clients have received all the data, the AJAX request is considered successful, and the success callback func ...

javascriptjqueryajax

Extracting information from JSON using arrays

I'm facing a bit of a challenge with this one. I've been trying to use jQuery on my website to update an element. It works perfectly fine without using an array of data in JSON, but as soon as I introduce an array of data, it stops functioning. I ...

javascripthtmljqueryjson

Avoid losing any entered form information when leaving the page

As I work on creating a datagrid with hundreds of rows, each row features a checkbox that allows users to select items from the grid. I've noticed that users might spend considerable time filtering and searching through the grid, ticking checkboxes a ...

javascriptjqueryforms

Initiate a Gravity Forms form refresh after modifying a hidden field with jQuery

TO SUM IT UP: Is there a way in Javascript to activate an update on a Gravity Form that triggers the execution of conditional logic? ORIGINAL QUESTION: I'm using Gravity Forms and I have set up an "on change" event $('#gform_1').find(&apos ...

javascriptjquerywordpressgravity-forms-plugin

Altering the background color of :after while :before is being hovered over

Is it possible to modify the :after section when hovering over the :before part? Take a look at this image for reference: I want to alter the small triangle shape when the large square is being hovered over. The square uses the :before pseudo-element and ...

css

I've exhausted all my knowledge but still unable to get Tailwind to work

I've been troubleshooting Tailwind for the past 6 hours. Managed to set it up in a simpler Nextjs/React/Typescript project, but struggling to get it working in this larger codebase. I'm sure I'm missing something obvious, but I'm at a ...

javascriptcssreactjstailwind-css

Encountering a lack of response when making an ajax call to CouchDB

Being relatively new to CouchDB, I appreciate your patience. Currently, I have set up an instance of CouchDB on a VM. It can be accessed without any issues through the browser via futon or directly at: http://192.168.62.128:5984/articles/hot_dog Althoug ...

jqueryajaxjsoncouchdb

Issue with Ajax form submission functionality not working for sending form data

I recently found the solution to executing a Send Mail script without reloading the page after facing some AJAX issues. However, I am now encountering a problem where the post data is not being received by the PHP script when my form posts to AJAX. For re ...

javascriptphpjqueryajax

What is the best way to create separation between the href attribute of an a tag and the

Currently, I am utilizing Material UI in React and encountering an issue with the spacing between an <a tag and some text both before and after it. The lack of space is causing them to merge together. <Typography style={{ fontSize: 14, textAlig ...

cssreactjsmaterial-ui

Mastering the implementation of owl-carousel in React.js

I'm currently working on a project that involves utilizing the react framework. My intention is to incorporate the owl-carousel, however, I've encountered issues as it fails to function properly. The following error keeps popping up: OwlCarousel ...

javascriptjqueryreactjswebowl-carousel

Having trouble with dragging a file from one box to another in HTML5. The functionality is not working

Encountering an issue where the image does not display in the left box after dropping it. Here is the sequence of events: Before dragging the image: https://i.sstatic.net/C6JSM.png After dragging the image, it fails to display: https://i.sstatic.net/7Du0 ...

javascriptcsshtml