"Position the div to appear on top of everything without causing the

Currently, I am working on a gallery project where I have successfully implemented functionality to open and close it using separate buttons. However, I am facing an issue where I want the opened gallery to be positioned above all other content on the page, occupying the full width and height without allowing scrolling through the original HTML (similar to how pictures open in Facebook).

Below is the HTML code for the gallery that opens:

<div class="container" id="container-one">

        <div class="gallery">
            <img src="1.jpg" style="max-width:100%">
        </div>
      
        <div class="gallery">
            <img src="2.jpeg" style="max-width:100%">
        </div>
    
        <a class="close" onclick="Closed()">&#10006;</a>    
</div>

Additionally, here is the corresponding CSS:

.container {
    display: none;
    position: absolute;
}

.gallery {
    display: none;
    height: fit-content;
    width: 99vw;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.6);
    background-size: 100%;
    z-index: 1300;
    text-align: center;
  }

I have utilized the style.display property to toggle between displaying and hiding the gallery.

While searching online for solutions, I came across lengthy code snippets for entire galleries which made it difficult for me to isolate the specific part causing this behavior.

javascripthtmlcss

Answer №1

The solution might lie in the CSS property called overflow. Setting overflow to hidden on the body element disables scrolling. For more information, check out this thread discussing how to disable scroll.

This snippet of CSS code will position your element above everything else on the page:

.container {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10; /* Ensure this z-index value is higher than any other element on the page */
    width: 100%;
    height: 100%;
}

If you need to dynamically enable or disable scrolling, you can utilize the following JavaScript functions:

function disableScroll() {
    let body = document.querySelector("body");
    body.style.height = "100%"; // Fix the height
    body.style.overflow = "hidden"; // Hide overflow to disable scrolling
}

function enableScroll() {
    let body = document.querySelector("body");
    body.style.overflow = "";
}

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

Creating a spherical shape without relying on SphereGeometry: Is it possible?

I am attempting to create a sphere without utilizing SphereGeometry. My approach involves drawing the sphere using latitudes and longitudes. Below is the code snippet I am working with: for (var phi = -Math.PI / 2; phi < Math.PI / 2; phi += Math.PI / 1 ...

javascriptthree.js

Tips for capturing a screenshot of a Three JS CSS 3D Renderer?

I am working on a Three JS application with a CSS 3D Renderer, using the html2canvas library to capture screenshots of the document.body. Unfortunately, the issue arises when the screenshot doesn't include the CSS 3D Renderer. Below is the code snip ...

javascriptthree.jshtml2canvas

Guide to transforming a random hash into a visually appealing HTML table

After exploring HTML::QuickTable, I've noticed that it seems to only support a one-level-deep hash. I couldn't find a way within this module to specify the colspan and rowspan for certain headers when dealing with a multi-level hash structure. Is ...

htmlperl

JavaScript/jQuery creation of a dynamic breadcrumb trail linked to the current page

After reviewing the question posted here, the answer seemed adequate for static navigation but lacks functionality for actual user navigation. I am in need of a custom Javascript/jQuery script that can dynamically generate breadcrumbs based on the URL of ...

jqueryhtmlbreadcrumbs

Retrieving information from an AJAX callback

Is there a way to extract the URLs from PHP data? Here is an example script that may help you achieve this: PHP $query = 'SELECT * FROM picture LIMIT 3'; $result = mysql_query($query); while ($rec = mysql_fetch_array($result, MYSQL_ASSOC)) { ...

phpjavascriptjqueryajaxjson

What is the equivalent of Android Input/Output stream in TypeScript/JavaScript?

My current task involves sending data from Angular to an Android device. The requirement is for the data to be sent to the Android device using its input/output stream methods. If you are unsure of what I am asking, please provide assistance and let me kn ...

javascripttypescriptinputstreamoutputstream

Can parameters be effectively passed to the $.change() method in any way?

I created a function that is triggered when the text in an input textbox changes - In my HTML file - <input id="unique" type="text" data-ng-change="KeywordChange(filterKey)" ng-model="$parent.filterKey"> In the controller - $scope.KeywordChange ...

javascriptjqueryhtmlangularjs

User interface modal dialog box with a close icon that changes color

Having trouble fixing the color of ui-icon-close, the close icon "X"? I've been referring to this page How To Specify (Override) JQuery Icon Color for help on changing the color of ".ui-close-icon" but it hasn't worked. Any suggestions on how to ...

javascriptjqueryhtmlcss

Is there a way to dynamically call an Ember component using a variable?

Imagine having an array of widget objects stored in your controller, with each widget object containing a member variable assigned the name of a component class. How can you make your template call upon that specific component? //widgets[0].widget.compone ...

javascriptember.js

What are the best practices for implementing asynchronous integration testing with an npm library?

I have developed a crucial set of middleware components that are essential for generating valid GeoJSON data to support the functionality of a particular service at CityGram. In order to ensure the accuracy and reliability of these middleware components, I ...

javascriptnode.jsnpmintegration-testinggeojson

Flexbox won't align child elements of parent vertically

I am currently facing an issue with my parent container div and its child elements. Even though one child element is being vertically centered, the other two child elements remain at the top of the page. I have been trying to troubleshoot this problem but ...

htmlcssangularflexbox

php state management

I am brand new to PHP and have been learning it intensively for the past 18 hours. I have a specific goal in mind, which is to add indirection to my JavaScript get requests in order to facilitate cross-domain access to another website. However, I want to a ...

phpjavascriptgetstatepersistent

Obtain the dynamic identifier of an element within every block using jQuery in a rails application

Let me illustrate my issue with a simple example. I am currently developing a recipe application. Within the show partial that loads via AJAX, I have the following setup: _show.html.erb <% @recipe.ingredients.each do |ingredient| %> <div class ...

javascriptjqueryruby-on-railsajax

How can I obtain the MAC address of a tablet (iPad or Android)?

Synopsis: My project involves creating a HTML5 web app designed for tablets like iPad or Droid to log in to a server and perform various tasks. The client has requested a way to retrieve the device's MAC address during the login process. Most solution ...

javascriptandroidipadhtmlweb-applications

Steps to align table next to the paragraph tag

I am facing an issue trying to align a table inline with the p tag in my HTML code. I have attempted to make minimal changes to achieve this, but it is not working as expected. Here is the code I have tried: <p>ABCD</p> <table style = displ ...

htmlcss

While looping through a JSON object and converting it to a string, the script is causing

I'm facing an issue with my webpage where I retrieve a JSON object from a URL and convert it into a string. Depending on whether the string is true or false, I want the div to either fade or remain unchanged. The JSON object obtained from the URL loo ...

javascriptjqueryjsonwhile-loop

The positioning of the input slider in the Css is quite unconventional

I am currently facing a challenge in trying to embed an input slider within a parent div. The desired outcome is illustrated below: https://i.sstatic.net/WAIyC.png However, I encounter the issue that when attempting this setup, the input slider ends up w ...

htmlcss

There seems to be a problem with the bundle.js file caused by Uglify

I've just finished a project and now I'm ready to start building it. Utilizing a boilerplate project, I still find myself struggling to comprehend all the npm/webpack intricacies happening behind the scenes. Whenever I try to run "npm start", I k ...

javascriptnode.jsnpmwebpackuglifyjs

Displaying data from a JSON object to a DOM table can be achieved by dynamically generating table columns based on the keys within

There is a JSON object that I'm working with: [ { "SysID": "4", "Defect Classification": "Wrong Image Color", "1": "3.0", "2": "", "3": " ...

htmlangular

Ways to Insert Text and Values into an Array

{{ "user": "randomuser", "message": "require assistance" }, { "user": "automated assistant", "message": "do you need any help?" }, { "user": "randomuser", "message": "another inquiry" } I am seeking to extract additional paragraphs ...

javascriptjquery