0

I'm working on a gallery and managed to make it open and close by clicking two separate buttons. However, when opened I want it to be positioned above all content, the full width and height of the page and to not be able to scroll the original html (for example like when you open a picture on facebook). Currently when I try to position it absolute or fixed, it just jumps to the top of the page and I can still scroll through the rest of the html.

The html of 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>

And the 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;
  }

To open and close it I used style.display change from none to block.

I looked online but could only find codes for entire galleries with hundred lines and I couldn't figure out which part did that.

Joe
  • 1
  • You can stop the scrolling of the body and also make the the modal which is opened height 100vh ! .... Does this sounds good ? – Sanmeet Jul 14 '21 at 18:34
  • Take this js fiddle as above mentioned example ... I think you'll understand it very well see [js fiddle](https://jsfiddle.net/zxnjrsbe/2/) – Sanmeet Jul 14 '21 at 19:05
  • This worked just fine! I need to reposition the buttons now, but the scroll stopped and it is full screen now. Thank you! – Joe Jul 14 '21 at 23:29
  • I think I solved your problem without answering ! Right .... – Sanmeet Jul 15 '21 at 05:00

1 Answers1

0

The key may be the overflow value in CSS. When overflow is hidden on body, scroll is disable. See this questions about disabling scroll.

This CSS will place your element above all, and on the whole page

.container {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10; /*This must be the highest z-index value of your page to be above all*/
    width: 100%;
    height: 100%;
}

And to disable/enable scroll dynamically, you can use:

function disableScroll() {
    let body = document.querySelector("body")
    body.style.height = "100%" // Make sure the height is fixed
    body.style.overflow = "hidden" // Hide the overflow = disable scrolling
}

function enableScroll() {
    let body = document.querySelector("body")
    body.style.overflow = ""
}
Doreapp
  • 151
  • 6
  • The scroll did disable but when I click the button to open the gallery (which is somewhere at the bottom of the page) it still displays it on top, along with my front page. I'll look through more gallery codes to figure out what exactly is used to open it like a picture slider, but could it be that it has to be like a new window on top of the html? (I'm sorry I'm fairly new to this, I know there's a way to display two htmls in one page but I'm not exactly sure how that works and if it's what I need ) – Joe Jul 14 '21 at 21:36
  • Try an enormous z-index, to be sure that the problem does not come from here – Doreapp Jul 14 '21 at 21:41
  • That's not an issue, it displays it on top of all but way up on top of the html, not in the bottom section where the open button is. I managed to bring it down to where it's supposed to be by setting top: 300vh, but I think this will be a problem once I work on the responsiveness of the site, as heights of the div's are not fixed. – Joe Jul 14 '21 at 22:11