The footer of the website remains separate from the overlay of the modal Popup Form

I recently implemented a modal popup form on my website that covers the entire viewport with its background. However, I am facing an issue where the footer of the website is still displayed on top of the modal background, even though everything else seems to be working correctly. The modal is triggered by a simple JavaScript function.

Below is the CSS code I am using:

#footer {
    position: fixed;
    width: 100%;
    z-index: 2;
    bottom: 0;
    padding: 8px;
    background-color: #688596;
    color: white;
    box-shadow: 0px 2px 8px #676767;
}

.modalBackground {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(180, 180, 180, 0.6);
}

The JavaScript code toggles the display property of .modalBackground from 'none' to 'block' to show the modal. While everything seems to be working fine, the issue with the footer remaining on top persists. Any insights or suggestions on what I might be missing here would be greatly appreciated. Thank you in advance!

htmlcss

Answer №1

To improve the display of your modal background, consider increasing the z-index value of .modalBackground to be higher than that of your header and footer. Currently, the z-index of .footer is set to 2. Therefore, the z-index of .modalBackground should be greater than 2. You can try setting it to 999. Update the .modalBackground class in your CSS like this:

.modalBackground {
    display: none;
    position: fixed;
    z-index: 999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(180, 180, 180, 0.6);
}

Answer №2

The reason for the issue is that the z-index value of the footer element is higher than the z-index value of the modal element.

Remember, elements with a higher stack order are always displayed in front of elements with a lower stack order.

To learn more about how z-index works, visit this link. You can try changing the z-index values like this:

#footer {
    position:fixed;
    width: 100%;
    z-index: 1;
    bottom: 0;
    padding: 8px;
    background-color: #688596;
    color: white;
    box-shadow: 0px 2px 8px #676767;
}

.modalBackground {
    display: none;
    position: fixed;
    z-index: 2;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(180, 180, 180, 0.6);
}

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

Looking for two sliders in a row simultaneously

I currently have between 40 to 50 logos displayed on my website in a slider format, but it takes a lot of time to view the entire slider. Here's a snippet of my code: Below is the code snippet: <script src="https://ajax.googleapis.com/ajax/lib ...

phpjqueryhtml

Create space between two table-cell div elements by adjusting the margin

Two buttons need to be displayed in one line with vertically aligned text, so I used display: table-cell. However, the two divs are sticking together and margin is not working. Is there a way to separate them? Check out the code here: http://jsfiddle.net/ ...

htmlcsscss-tables

CSS menu LI with horizontal spacing

I'm currently working on aligning the boxes for each <li> tag next to each other without any spaces in between. However, at the moment, there is a significant gap separating each box. How can I eliminate this space? Here is the HTML code snippe ...

csshtml-listsspacing

Obtain Data Grid from Website

I need to extract a table with the following columns: "Date|Open|High|Low|Close|No.of Shares|No.of trades|Total Turnover|Deliverable Qty" from the website "" Below is the code I am using: Sub Macro_BSE() Application.ScreenUpdating = False Dim File ...

javascripthtmlexcelvbaweb-scraping

The width of the menubar dynamically adjusts upon mouse hover using CSS

I encountered a problem with my menu and submenu. When I hover over the list elements in the main menu, the width of the menu items changes abruptly which looks confusing. I tried fixing the width, but then there is too much space between the menu items. ...

css

Customizing CSS Styles in ASP.NET MVC for Multilingual Websites

We are looking to make our ASP-MVC website multicilingual and support different languages. One challenge I am facing is how to apply distinct style-sheets for each language, especially when dealing with right-to-left (RTL) languages like Hebrew or Arabic c ...

jquerycssasp.net-mvc

Modifying the structure of serialized data

After serializing a JS form, the data looks like this: .....&xx=xxx&otherError=&input=SMS&message=sdfgs&...... Can anyone provide guidance on how to replace the value of message with the content of a textarea before making an ajax cal ...

javascriptjqueryhtmlforms

Missing or Lost Values in Object-Oriented PHP Arrays

I am fairly new to object-oriented PHP and PHP in general. I have a class where I assign array values in the constructor, but later when I try to access the array, it shows as null. Any ideas why this might be happening? Could it be an issue with scope? c ...

phphtmlarraysscope

What is the widely used term for the container that allows for panning by dragging with a mouse?

I am looking to design a container that extends beyond the width of the page, allowing users to pan by dragging through empty space between controls without zooming in or out. What is this type of container control typically referred to as? I am intereste ...

htmlvue.jsuser-interfacecontrols

Using Bootstrap and CSS to style a div element and fill it

I'm struggling with a div that splits in two, where I've placed an image on the left side. However, the image doesn't seem to fill the entire space and there are empty spaces on the sides. I'm using bootstrap, but any CSS solution would ...

htmlcssbootstrap-4

The start screen fails to display when clicking the restart button

I am struggling to get the restart button to display the start screen again. Even though I have called the restart function within the clearColors function, which should show the start screen, it hasn't been effective so far. Initially, in the fadeOut ...

javascripthtmlcssfunctionhtml-table

Using jQuery.post to select and manipulate the target div displaying Google search results

I am trying to implement a custom form and display the results in a specific target DIV ('results') using ajax. However, I am facing difficulties and unable to figure out what is going wrong. Even after referring to this demo (https://api.jquery ...

jqueryajaxhtmltarget

When incorporating props into styled components, the outcome often turns out to be unexpectedly

I have implemented styled components to change the text color by passing props. <Button variant = 'colour' type="submit" form="myForm" className="submit-btn"> Submit </Button& ...

cssreactjsnext.jsstyled-components

Html content overlapping div rather than being stacked vertically

My goal is to arrange a group of divs inside another div in a vertical stack. However, I am facing an issue where the text from the last div is overlapping with the second div instead of following a proper vertical alignment where the text in the third div ...

javascripthtmlcss

The vertical navigation sub-menu is designed to overlap the div container for a

I'm having an issue with my sidepanel vertical navigation where sub-menus are not being displayed properly due to a div container. The width of the div container [side-panel-links] is causing the sub-menus and children of the sub-menus to be cut off. ...

jqueryhtmlcss

Utilize a dynamic approach to add the active class to navigation list items

My files all have a header that includes a navigation bar. I am trying to use jQuery to add the 'active' class to the relevant list items (li). The method I initially thought of involved setting a variable on each page, assigning an ID equal to ...

javascriptjqueryhtmlcssnav

The Bootstrap 4 column is not floating properly to the right as it is leaving a gap on the

My right sidebar is not floating to the right and has space from the right side. You can view it at this link: <div class="col-md-2 col-lg-2 col-sm-2" id="right-sidebar" style="background-color:orange; float: right; right: 0!important; width: 100%;"& ...

cssbootstrap-4css-float

Display the HTML element prior to initiating the synchronous AJAX request

I'm looking to display a <div> upon clicking submit before triggering $.ajax() Here's my HTML: <div id="waiting_div"></div> This is the CSS: #waiting_div { position: fixed; top: 0px; left: 0px; height: 100%; ...

javascriptjqueryhtmlcssajax

Executing a JavaScript function when a column in a Fusion Chart is clicked

I have two div elements in HTML and I would like to have div2 load when div1 is clicked. Additionally, whenever div2 loads, a back button should also appear to return to div1. Is there a way to achieve this using HTML? <td background="images/bgTd.gif ...

javascripthtml

Challenges arising from CSS position: fixed on iPhone 6+ in landscape orientation running iOS 9

Encountered a strange issue with the fixed header on my website under specific conditions: Using an iPhone 6+ in landscape mode. Using Safari with at least two tabs opened. The page has a fixed position header with html and body set to position: relative ...

ioscssmedia-queriesiphone-6-plus