Covering div with an overlay that remains fixed on top while allowing the page to scroll

In the example below, when you click on the yellow box, an overlay appears and stays fixed in its position. However, when you scroll down, it remains in place due to its fixed position.

How can I ensure that the overlay remains on top of the .div even when scrolling, so it does not move?

$('.modal').css("top", $(".div").offset().top).css("left", $(".div").offset().left).css("width", $(".div").css("width")).css("height", $(".div").css("height"));

$(".div").click(function() {
  $('.modal').addClass("loading");
})
.div {
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  height: 300px;
  width: 300px;
  background-color: yellow;
  content: "";
}

body {
  height: 500px;
  background-color:black;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}

.modal.loading {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>
<div class="modal"></div>

javascriptjqueryhtmlcss

Answer №1

Adjust the configuration to make it fixed.

.overlay {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, .8) url('http://example.com/image.gif') 50% 50% no-repeat;
}

Answer №2

Adjusting the positioning of the modal from fixed to absolute, nestling it within the .div element

$(".div").on("click", function() {
  $('.modal').toggleClass("loading");
})
.div {
  margin: 100px auto 0;
  height: 300px;
  width: 300px;
  background-color: yellow;
  position: relative;
}

body {
  height: 500px;
  background-color: black;
}

.modal {
  display: none;
  position: absolute;
  top:0;
  left:0;
  z-index: 2;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}

.modal.loading {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
.div content
  <div class="modal"></div>
</div>

Answer №3

It seems like you are looking for something along these lines, please let me know if there are any errors.

Start by replacing position: fixed; with position: absolute; in the modal class. Next, place the modal class div inside the class div like so:

<div class="div">
  <div class="modal"></div>
</div>

Check out the snippet below for a live demonstration: 

$(".div").click(function() {
  $('.modal').addClass("loading");
})
.div {
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  height: 300px;
  width: 300px;
  background-color: yellow;
  position: relative;
}

body {
  height: 500px;
  background-color: black;
}

.modal {
  display: none;
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}

.modal.loading {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  <div class="modal"></div>
</div>

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

How to locate an ID following an AJAX call in jQuery

I am experiencing an issue with a button that is supposed to print a form containing data based on different IDs, where each form has a unique ID. The problem arises when the main page fails to locate these IDs. Below is the JavaScript code responsible f ...

jqueryajax

PHP working in certain directories, but not all

I currently have a few basic html websites that feature a contact form which successfully sends emails using PHP. Recently, I decided to create another website utilizing the same contact form PHP script. However, upon submitting the form on this new websit ...

phphtml.htaccessweb-hosting

Is the CSS file not being applied across various versions?

Struggling with a CSS file issue here. When I try to access my application from a different machine or through the published folder, the CSS styling does not display correctly. However, the same CSS file works perfectly fine on the original machine where ...

css

Guide to updating user profile information using mongoose

When a user updates their profile on the client side using a form, the data is sent through axios to the nodejs express backend. I am looking to implement the mongoose library for updating user information. This is the approach I have taken so far: userR ...

javascriptnode.jsexpressmongoose

How can I effectively assign model data to a service property in an AngularJS controller?

I have established a service to facilitate the sharing of data/state across multiple controllers. One of the controllers updates certain properties within the service using scope data through a save function. The updated data is then accessed by other cont ...

javascriptangularjsangularjs-scopeangularjs-serviceangularjs-controller

Creating a shared component for restricting input to only numbers in ReactJS with Material-UI TextField

I am currently working with MUI TextField and my goal is to implement a validation that allows only numbers but not the eE+- keys. I aim to create a standard component for this using onChange event. I need to address the scenario where if the user enters ...

javascriptreactjsmaterial-ui

Effortlessly initiate the consecutive playback on SoundCloud

I'm currently working on my music blog and I'm looking for some guidance in implementing a feature where the widgets start playing one after the other. Specifically, I have both SoundCloud and YouTube widgets, but I would like to focus on achievi ...

javascriptjqueryyoutubewidgetsoundcloud

Launching a modal in a new browser window with the help of JavaScript or PHP

I need to implement a feature where clicking a link opens a modal in a new tab and redirects the current page to a different link, similar to how retailmenot handles coupons. Here is the code snippet I am currently working with: <div onClick="myFunctio ...

javascriptphpjqueryhtmlcodeigniter

"Experience the stunning transformation of 3D objects from poor rendering to exceptional quality in the GLTF-Files Online

I am looking to showcase a model created in Blender on a webpage. The issue is that the rendered quality of the model seems poor, especially with the edges not being properly displayed. Interestingly, when viewing the model in an online viewer, the edges a ...

htmlthree.jsblendergltf

What is the reason behind including a data string filled with a series of numbers accompanied by dashes in this ajax request?

I stumbled upon a website filled with engaging JavaScript games and was intrigued by how it saves high scores. The code snippet in question caught my attention: (new Request({ url: window.location.toString().split("#")[0], data: { ...

javascriptajaxencoding

struggling to loop through JSON object with jQuery

I'm just starting to work with AJAX/JQuery/JSON, and I'm using Struts 2 to retrieve a JSON object through AJAX. While I can see the object that is returned, I am having trouble iterating over it. The returned object is a list containing one or mo ...

javascriptjqueryajaxjson

Enhance the appearance of specific wordpress usernames by adding a touch of "flair" next to them

I'm looking to add a special "flair" next to specific users on my WordPress website, similar to how YouTube distinguishes verified users. I have the CSS for changing the color on hover, but I need help keeping it positioned correctly. Examples from Y ...

htmlwordpresscss

How to access a nested object in a v-for loop using Vue.js

How can I access the most recent object within a nested object array inside another object array in Vue.js? Below is an example to illustrate my question. Example Object elements: [ { 'name': 'foo', 'content': [ ...

javascriptnode.jsvue.jsvuejs2vue-component

Issue with Datepicker validation not functioning correctly following a BootStrap update

After submitting the form, the date-picker field correctly validates and highlights it as mandatory. However, even after selecting a date from the picker, the validation error does not disappear. The field continues to be highlighted in red, preventing the ...

javascriptjqueryhtmlbootstrap-4bootstrapvalidator

Capture an image of the video frame every second

Have you ever noticed the cool feature on YouTube where you can easily 'scrub' through video and see a thumbnail view at each second? https://i.sstatic.net/Yi8He.png I'm curious - how is this achieved? Does the server have to send over eac ...

javascripthtmlvideohtml5-video

Looking to retrieve the mouse coordinates using JavaScript

How can I use JavaScript to track the mouse position on a canvas? Upon visiting this page: http://billmill.org/static/canvastutorial/mouse.html They provide this code snippet: function initializeMouse() { canvasMinimumX = $("#canvas").offset().left; ...

javascriptajaxeventsdom

Clicking on the (x) button element will eliminate the DOM node from a list

https://i.stack.imgur.com/GxVYF.png A value is being dynamically added to my page, and here is the code snippet: function favJobs(data){ number_of_jobs_applied = data.total_bookmarked; $('.bookmark-title').append(number_of_jobs_applied, " ...

javascriptjquery

Swap all occurrences of an array within a given string with a different array

I'm currently developing a JavaScript applet that involves replacing array entries in a given string with elements from another array. Here is the code I have so far: const str = "Lion, Unicorn, Unicorn"; const arr1 = ["Lion", &quo ...

javascriptarrays

Is it possible for Netbeans 7.3 to debug a PHP script when triggered by a JSON request?

In my Netbeans 7.3.1 setup, I usually have no issues debugging PHP files with Xdebug when my site project is structured to generate the site directly from PHP code. However, I'm currently working on a site that consists mostly of HTML files and only h ...

javascriptphpjsonnetbeans

Is it possible to modify the names of the months in bootstrapMaterialDatePicker?

I've been struggling to change the month name in my code, and despite trying multiple approaches, it still doesn't work. Here is a snippet of my code: HTML; <div class="form-line"> <input type="text" class="form-control datepicker" ...

jqueryhtmldatepicker