Overlap and cover additional elements within a DIV

I am looking to create a versatile function that can effortlessly overlay various elements such as selects, textfields, inputs, divs, tables, and more with a partially transparent div matching their exact height and width.

I have managed to obtain the position and dimensions of the element:

$(element).height()
$(element).width()
$(element).offset().top
$(element).offset().left

However, I am uncertain how to synchronize the element's position and size with the div. I need the div to adjust if the element's position or size changes. Any suggestions on how to achieve this? Alternatively, is there a jQuery plugin available for this functionality? I believe this would be beneficial for temporarily blocking an element for user interaction during operations such as AJAX requests.

Thank you.

javascriptjquerycssjquery-pluginstwitter-bootstrap-3

Answer №1

To implement an overlay on any element, consider creating a custom function or plugin using jQuery's .wrap() function along with CSS styling.

$.fn.overlay = function() {

    return this.each(function(){
      var $this = $(this);

      var left = $this.offset().left;
      var top = $this.offset().top;
      var width = $this.outerWidth();
      var height = $this.outerHeight();

      $this.wrap("<div id='overlay'> </div>")
        .css('opacity', '0.2')
        .css('z-index', '2')
        .css('background','gray');
    });
};

For a demonstration, you can visit the following link on Bootply:

This solution is designed to be easily adaptable and not limited to Bootstrap elements.

Answer №2

Just like that

example

styling

section {
position:absolute;
z-index:3;
height:300px;
width:500px; 
background-color:blue;
}

section section {
position:relative;
z-index:4;
top:0px;
bottom:0px;
left:0px;
right:0px;
background-color:white;
opacity:0.8;
}

section section input {
position:absolute;
top:50px;
z-index:2;
}

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 is the best method for deleting the 'records per page' label text from datatables?

I'm trying to customize my jQuery datatables by removing the label "Records per page." I already know that "oLanguage": { "sSearch": "" } can be used to remove the search label, but is there a similar option for hiding the results per page label? ...

javascriptjquerydatatable

Creating a Yup field that is an object and making it required when another field is set to true in the validation process

Just getting started with Yup validation and I'm facing an issue. I am attempting to make certain fields required based on a condition. Specifically, I want the digital object to be required only if hasDigital is true; otherwise, it should be optional ...

javascriptformsvalidationyup

Using CSS or Bootstrap, align the image to the right side of the content

Struggling to align an image to the right of the content area, inspired by this Dribble shot. Check out the inspiration here This is what I've come up with so far: Link to my progress on CodePen .content { position: relative; } .bg-image { posi ...

htmlcssbootstrap-5

Are there any methods to alter the current preFilters within jQuery?

Is there a way to access and manipulate the internal jQuery preFilters using the jQuery.ajaxPrefilter() function? In version 1.11.1, I noticed a private preFilters object declared on line 8568, but it doesn't seem like there is a built-in method to in ...

javascriptjqueryajax

Displaying a Div Using ASP AJAX

After submitting a comment, I would like to implement a jQuery function that will fade in a message to inform the user whether the insertion was successful or not. How can this be achieved? I understand that I need to include the fadeIn effect within the j ...

jqueryasp.netajax

Leaflet: An issue occurred when attempting to retrieve a GeoJSON file from a multipolygon Layer

Here's the current issue: I have successfully implemented a MultiPolygon Layer in Leaflet, but I am encountering an error when trying to convert it to a GeoJSON object. This is my code snippet: let colecccionPoligonos=[]; const multiPolygonOptio ...

javascriptleafletgeojsonleaflet.draw

Simulate a left mouse click on the swf object once the page has fully loaded

My website now features a flash game that inexplicably requires a left mouse click on the page after loading in order to enable arrow key functionality. I attempted using a JavaScript-based mouse trigger in my HTML code and assigned an ID to the flash obj ...

javascriptflash

Executing multiple MSSQL queries in a Node.js environment

Currently, I am faced with the challenge of running multiple SQL queries. The issue lies in variables going out of scope due to the asynchronous nature of node.js. I am attempting to find a solution similar to the await keyword available in C#. To clarif ...

javascriptnode.jsazure-mobile-servicesnode-mssql

Reboot the node.js server

As I delve into learning node.js, I decided to start with a basic example in a file named server.js: var http = require("http"); function onRequest(request, response) { response.writeHead(200, {"Content-Type": "text/plain"}); response.write("it&a ...

javascriptnode.js

Disabling dropdown list values based on the selection of other dropdown lists in JQuery: How to do it

I recently created a script that enables the addition of dropdown lists with buttons, ensuring that each dropdown list cannot select the same value from the database. $(document).ready(function(){ $("select").change(function() { $("select").not ...

jquery

Could there be a mistake in the way array combinatorics are implemented in JavaScript?

Having encountered the necessity for generating unique combinations when dealing with multiple arrays, I developed this script. While it functions as intended during the combination process, storing the result in a final array yields unexpected outcomes. ...

javascriptarrayscombinatorics

Fixing the Angular2 glitch: 'Uncaught TypeError: Cannot read property 'apply' of undefined'

Seeking solutions: How can I fix the "Uncaught TypeError: Cannot read property 'apply' of undefined" error that keeps showing up in the console of my Angular2 application? Any helpful insights are appreciated! ...

javascriptangular

Position the image between two div containers in the center of the screen, ensuring it is responsive and does not overlap with any text

I've been working on trying to position an image between two divs on my webpage. So far, I've managed to place the image there but it's not responsive (only displays correctly at a width of 1920) and ends up overlapping the text in both divs ...

htmlcssresponsive-design

Different ways to change the value of a variable in an isolated scope using another directive

Utilizing a directive with two modes, edit and preview, multiple times in my codebase. function () { return { restrict: "E", scope : { model : '=' }, [...] controller : function($scope, $el ...

javascriptangularjsangularjs-directive

Display iframe as the initial content upon loading

Seeking solutions for loading an iframe using jQuery or Ajax and outputting the content to the page once it has been loaded. The challenge lies in loading an external page that may be slow or fail to load altogether, leading to undesired blank spaces on th ...

phpjavascriptjqueryhtmlajax

Protruding button on the surface of the form

I'm struggling with a form layout issue. Here's what it looks like: https://i.sstatic.net/arfJQ.png Removing the mb-3 class doesn't solve the problem, it just removes the spaces between the inputs. How can I make sure the button remains in ...

htmlcsscss-floatbootstrap-5clearfix

Exploring the flow of resolve promises in UI-router from the main root state to its sub-states

Currently, I am in the process of developing an Angular application with ui-router. The first step I took was to create a root state that serves as an abstract one intended for resolving asynchronous dependencies. This means that any subsequent sub-states ...

javascriptangularjspromiseangular-ui-routerangular-promise

The issue of data not being transmitted when an ajax jquery form is modified

Each item in the cart/order has its own unique form with IDs created in a loop (e.g. 'id'=>'cart_'.$line )(cart_1,cart_2), along with an update link for each form within the loop. See the code snippet below: echo form_open($control ...

jqueryajaxformscodeigniter

Implementing a clickable search icon within a form input field using CSS: a guide

I have added a search icon to the form input field. Check it out here: https://i.sstatic.net/pnv6k.jpg #searchform { position: relative; } #searchform:before { content: "\f118"; font-family: "pharma"; right: 0px; position: absolute; ...

phphtmlcsswordpresssearch

Developing a Secondary User within Meteor.JS after Establishing the Primary User

Is it possible to automatically create a secondary user upon registration of the primary user using a form generated with the useraccounts:core package? An issue arises when attempting to run Accounts.createUser within Accounts.onCreateUser, resulting in ...

javascriptnode.jsmeteor