The Pop Up is displaying with half the page showing Opacity or Page Background

I'm currently working on a project that involves creating a pop-up window.

CSS Styling

<style type="text/css">
    #modalPage
    {
      display: none;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      background-color: rgba(0, 0, 0, 0.95);
      z-index: 999;
    }
    .modalContainer
    {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 50%;
      top: 50%;
      z-index: 999;
    }
    </style>

Content CSS

.modal
    {
      background-color: #6f9255;
      position: relative;
      top: -300px;
      left: -305px;
      z-index: 1000;
      width: 600px;
      overflow:auto;

    }

JAVASCRIPT Code

<script type="text/javascript">
function showPopup() {
     document.getElementById('modalPage').style.display = "block";

}

function hidePopup()
    {
      document.getElementById('modalPage').style.display = "none";
    }
</script>

HTML Markup

<div id="modalPage">
      <div class="modalContainer">
        <div class="modal"> </div>
      </div>
</div>

However, I've encountered an issue where the page background color set with this code 

background-color: rgba(0, 0, 0, 0.95);
only covers half of the page instead of the full page.

Due to the length of the pop-up content exceeding the original page size and overlapping with the footer links when using fixed positioning, I cannot keep the position fixed.

Any insights or suggestions would be greatly appreciated.

Thank you!

javascriptjqueryhtmlcss

Answer №1

It seems like the issue isn't caused by opacity. The problem lies in the dimensions of your .modalContainer - even though it is set to 100% width and height, starting at 50% from the top left makes it exceed those proportions to 150%. In contrast, #modalPage maintains a proper 100% width and height.

If you know the exact measurements of your container, adjusting the CSS for centering would be a solution. Here's an example:

.modalContainer
    {
      position: absolute;
      width: 50%;
      height: 50%;
      left: 25%;
      top: 25%;
      z-index: 999;
      background-color: red; /*added for visual clarity*/
    }

See this example in action: http://jsfiddle.net/L2cXP/

If you require a modal that extends beyond the page length, consider a different approach:

Vertical centering can be omitted since the modal surpasses the page size. Simply ensure #modalPage has an overflow: auto property to display a scrollbar when needed.

To prevent the standard scrollbar on your page when the modal appears, consider adding overflow: hidden to the body.

Refer to this working demonstration: http://jsfiddle.net/L2cXP/1/

Answer №3

.popupBox has a "margin-left" set to 50%, so it should start in the middle of the screen. You can achieve this by using the following CSS:

.popupBox {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: -50px; /* adjust as needed */
    margin-left: -100px; /* adjust as needed */
    z-index: 999;
}

Answer №4

give this a shot

<div id="modalPage">
    <div class='relative'>
        <div class="modalContainer">
           <div class="modal"> </div>
        </div>
    </div>
</div>

customized style for you

 .relative{
     position:relative;
     zoom:1;
     height:100%; 
     width:100%;
 }

Answer №5

Using a bit of CSS sorcery, we can create elegant and straightforward CSS popups without the need for JavaScript positioning! Take a look at this example:

Here's the HTML:

<div id="modalPage" class="csspopup-overlay">
    <div class="modalContainer csspopup-popup">
        <div class="csspopup-close" onclick="hideModal()">&times;</div>
        <div class="modal">Some modal content</div>
    </div>
</div>

The CSS definitions for .csspopup-overlay and .csspopup-popup are as follows:

.csspopup-overlay {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        text-align: center;
}
.csspopup-overlay:after, .csspopup-valignfix {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        height: 100%;
        width: 0;
        vertical-align: middle;
        content: '';
}
.csspopup-popup {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        position: relative;
        max-width: 80%;
        padding: 15px;
        box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
        background: #FFF;
        vertical-align: middle;
        border-radius: 6px;
}
.csspopup-popup > .csspopup-close {
        display: block;
        position: absolute;
        top: -15px;
        right: -12px;
        width: 12px;
        height: 12px;
        padding: 4px;
        border: 4px solid #fff;
        border-radius: 50%;
        box-shadow: inset 0 2px 2px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, .4);
        cursor: pointer;
        background: #555;
        color: #FFF;
        text-align: center;
        font-size: 12px;
        line-height: 12px;
        text-decoration: none;
        font-weight: bold
}

Check out the Demo here: http://jsfiddle.net/acA73/

Please note that these CSS styles have been extracted from the https://github.com/dfsq/cssPopup jQuery plugin.

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

Applying Regular Expressions in Java to "convert" a CSS style into an HTML tag style

In my Java code, I have a String variable that contains HTML code like this: <span style="text-decoration: underline;">test</span> My goal is to convert it to look like this: <u>test</u> If the HTML code is like this: <span ...

javahtmlcssregex

JS unable to insert new row in table

I checked the input value before submitting it in the form and confirmed that it is correct, returning as a string.enter image description here const saveList = () => { const inputListNameText = inputListName.value; fetch('/api/lists' ...

javascripthtml

Utilizing Odometer to pass a variable to jQuery

I'm interested in incorporating a jQuery odometer into a master page to display dynamic information. I found a helpful resource for this at this link. To achieve this, I need to fetch data from a SQL Server database using C# and then pass it to the J ...

javascriptjqueryasp.netasp.net-mvcasp.net-mvc-5

What is the best way to incorporate white-space:normal within the text of a jQuery Mobile grid button?

Below is the code for my jQuery Mobile Grid buttons: <div class="ui-grid-b my-breakpoint"> <div class="ui-block-a"><button type="button" data-theme="c"> <img src="res/icon/android/business.png" height="45"><br>Business</ ...

javascriptjquerycssjquery-uijquery-mobile

In Node JS, the variable ID is unable to be accessed outside of the Mongoose

When working with a Mongoose query, I encountered an error where I am trying to assign two different values to the same variable based on the query result. However, I keep getting this error: events.js:187 throw er; // Unhandled 'error' ev ...

javascriptnode.jsmongoose

Using JavaScript along with Ajax and JSON allows for sending complex data structures such as objects and

One of the features on my form allows users to input information about their clients. This versatile form enables users to add multiple phone numbers, email addresses, and physical addresses without any limitations. When adding a phone number or an email ...

javascriptjqueryajaxjson

Is there a glitch preventing the connection between HTML and CSS in Notepad++ even though the link is correct?

I have encountered a puzzling situation that has left me scratching my head in confusion. Despite being a rookie, I've had experience with linking CSS files before and can't understand why it's not working this time around. This issue is per ...

javascriptjqueryhtmlcss

An error occurred while parsing the request parameters during an AJAX POST request using the API

I am currently working on utilizing AJAX to make a POST request through an API. Unfortunately, I keep encountering the following error message: "error occurred while parsing request parameters". After some investigation, it appears that this error is trig ...

jqueryruby-on-railsajaxjsonapi

Using jQuery: in the event that $(this) or a different element loses focus, then

I am looking to execute a function when either the currently active element $(this) or another specific element (e.g.: div#tooltip) loses focus. However, I have not been successful in finding the right approach. I have attempted the following: $(this).add ...

javascriptjqueryjquery-selectorsevent-handlingelement

How can we use jQuery to target an element based on the text content of the one preceding it?

For example: <div id="input-content" contenteditable="true"> <p>Some text<p> <p>Some text<p> <p><br></p> <p>Some text<p> <!-- I would like to target the p tag following the p tag with br --> ...

jqueryhtml

Tips for customizing the appearance of a Material-ui Autocomplete element

I am facing an issue with my Autocomplete component that is being used in three different places on the same page, each requiring unique styling. How can I dynamically pass styling information from where the Autocomplete is rendered to its component file? ...

javascriptreactjsmaterial-uiautocomplete

Determine in Node.js whether an image is empty or not

I am in the process of developing a testing application that generates an image based on the URL provided by the user. The screenshots are captured using phantomJS and nightmareJS. Occasionally, users may input a non-existent URL, resulting in a blank ima ...

javascriptnode.jsphantomjsscreenshot

Creating PDFs using Puppeteer in the presence of `link` tags

On my website, students have the ability to create their own notes using a RichText editor where the content can be quite complex. I want to provide them with an option to download these notes as a PDF file. To achieve this, I am planning to use the "puppe ...

cssnext.jstailwind-csspuppeteer

Transforming a function into an array in TypeScript

I attempted to use the map() function on a dataURL array obtained from the usePersonList() hook, but I am struggling to convert my function to an array in order to avoid errors when clicking a button. import Axios from "axios"; import React, { us ...

javascriptreactjstypescript

Finding the location of a file within a published web component

I am currently working on a webcomponent where I need to include a link tag in the head section and set the href attribute to a folder within a node module. At this stage, during the development of my component, my project structure looks like this: http ...

javascripttypescriptpath

browsersync fails to refresh when alterations are made in the .css files

Why is browsersync not injecting the css correctly? Here is my code: const gulp = require('gulp'), sass = require('gulp-sass'), autoprefixer = require('gulp-autoprefixer'), browserSync = require('browser-sync ...

cssgulp

Issue encountered when attempting to display JSON index on individual result page

This is a JSON response. { "listing": { "id": "1", "name": "Institute Name", "contact": "9876543210", "website": "http://www.domain.in", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" da ...

javascriptangularionic-frameworkionic3

Assigning a unique date/time stamp to every MongoDB document when it is created

This is my second query regarding Node.js for today. It's getting late, and I need some assistance to quickly incorporate this function before calling it a night. I have developed a small Q&A application where I can interact with MongoDB to read and ...

javascriptnode.jsmongodbiotimestamp

Having trouble bringing my custom-built Angular module into my Angular application

Currently considering the utilization of this Yeoman generator as a starting point for a small project that will contain several reusable form components to be published. The generator constructs a module and an example component, directive, pipe, and serv ...

javascriptangularnpm

Determining data using the AngularJS Slider component

I am currently utilizing the angularJS slider from this source: https://github.com/venturocket/angular-slider The sliders are functioning correctly, but now I need to extract the values from them for basic calculations. The HTML code snippet is as follo ...

javascriptjqueryangularjs