How about this: "Designing a Pop-Up Window

Currently working on my own customized modal, here's the unique CSS I came up with:

.custom-modal{

    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 999;

    .custom-modal-content{
        margin: 60px auto;
        background-image:url('/static/img/background-modal.jpg');
        width: 700px;
        height: 700px;
        .box-shadow(0 10px 2px #999);
    }
}

Let's take a look at the corresponding HTML structure:

<div class="custom-modal">
<div class="custom-modal-content">
       My Unique Modal
    </div>
</div>

The purpose of .custom-modal is to create a greyed-out background while .custom-modal-content represents the actual modal box that pops up.

An issue arises when the greyed out background only covers the browser window and not the entire content of the modal box. If I use a fixed position for the background, it may obstruct the full view of .model-content.

htmlcssless

Answer №1

What do you think of this code snippet?

http://codepen.io/ivanchaer/pen/izDuI

Here's the HTML:

<div class="modal"></div>
<div class="modal-content">
   My Modal
</div>

And here's the CSS:

.modal {
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
z-index:999;
}

.modal-content {
position:relative;
z-index:1000;
background-color:#fff;
width:700px;
height:700px;
box-shadow:0 10px 2px #000;
margin:60px auto;
}

Answer №2

Here is a solution for you, detailed in this article (in Russian). It involves a jquery plugin that can be customized using only styles.

Check out the Demo and the code on Github.

In short: when the modal is displayed, a class called lock is added to the body element (body.lock {overflow: hidden} — this prevents scrolling of the body).

The div.shim acts as a fullscreen modal background with a fixed position, allowing the modal content to scroll without affecting the body contents.

Here is the HTML structure:

<html>
  <head>
    ...    
  </head>
  <body class="lock">
    <div class="shim">
      <div class="modal">
        ...
        <h1>Hi, I'm the modal demo</h1>
        ...
      </div>
    </div>
    ...
  </body>
</html>

(English is not my native language, so feel free to correct any mistakes in my explanation)

Answer №3

To prevent the .modal from moving when scrolling down the page, make sure to include position:fixed in its styling. Additionally, you can customize the .modal-content by adjusting the following properties:

.modal-content{ 
    position:absolute;
    margin: -350px 0 0 -350px;
    top:50%;
    left:50%;
    background-image:url('/static/img/background-modal.jpg');
    width: 700px;
    height: 700px;
    box-shadow: 0 10px 2px #999;
    z-index:1000;
}

Answer №4

For the 'greyed out' effect, it is best to have a separate div for it like this:

<div class="modal"></div>
    <div class="modal-content">
       My Modal
    </div>

Make sure to position the greyed out div properly and center the modal content div both vertically and horizontally.

The main issue seemed to lie with your implementation of the greyed out div.

You can view an example in this fiddle: http://jsfiddle.net/uj9Gg/2/

Answer №5

By updating the CSS properties in your .modal class from width:100%; and height:100%; to min-width:100%; and min-height:100%;, you should be able to resolve the issue you are experiencing.

.modal {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    min-width:100%;
    min-height:100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 999;

    .modal-content {
        margin: 60px auto;
        background-image:url('/static/img/background-modal.jpg');
        width: 700px;
        height: 700px;
        .box-shadow(0 10px 2px #999);
    }
}

http://jsfiddle.net/E4Nm4/3/

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

The sequence of HTML attributes

Could there be a subjective angle to this question (or maybe not)... I work on crafting web designs and applications using Visual Studio and typically Bootstrap. When I drag and drop a CSS file into an HTML document, the code generated by Visual Studio loo ...

javascripthtmlcssattributescoding-style

Tips for keeping the background image in place while resizing the page

How can I set the background image for the whole page without it changing position with resizing? The image is 3065px in height so that should not be the issue. .bg { background-image: url("#"); height: 3065px; width: 100%; background-positio ...

cssbackground-image

Is it advisable to utilize media queries and transform: translateY(-%) to position content above the mobile keyboard?

I've been struggling for nearly a whole day and could really use some assistance. I'm having trouble understanding how chat web apps manage to work around this particular issue. There have been numerous forum posts discussing the problem: I am tr ...

javascriptcssreactjs

Aligning a grid container in the middle

#panelb { background: lightblue; display: grid; grid-template-columns: repeat(auto-fit, 300px); } .card { background: gold; } .imgcard { display: block; width: 100%; margin: 0 auto; } <div id='panelb'> <div class=' ...

htmlcsscss-grid

The Chart.js graph fails to appear when placed within an ngIf directive

I have encountered an issue with my simple scatter line chart created using Chart.js within a bootstrap panel. It works perfectly fine until I place it inside an ngIf div. Has anyone faced this problem before? Is there a solution to make the chart display ...

htmlangularjstwitter-bootstrapangularchart.js

adjust the width of an element based on the size of characters within it

I need to ensure that the width of a div is equivalent to 10 characters If one character is equal to 2px, then I want the width to be 20px, even if the text is only 4 characters long. <div class="row"> <div class="key">City</div> ...

htmlcss

What is the best way to output a received HTML page from the server?

I'm currently working on printing an HTML page that was generated using Node.js on my server. After sending the page to the client side as a response to an AJAX request, I have stored it in a JavaScript variable. var resp_json = printRequest.getRespo ...

javascripthtmlajaxnode.js

The best practices for coding Jquery plugins to adhere to style guidelines

I have been grappling with this issue for quite some time now, and I am seeking feedback from others. I am in the process of creating a personalized library to expedite web app development, and I want to ensure that I adopt the correct approach. My intenti ...

javascriptjquerycss

Implementing a translucent overlay onto a specific HTML section using sidebar.js/jQuery

Searching for a way to enhance the functionality of my website using Sidebar.js, I came across an interesting feature on hypebeast.com. When you click on the three-bar icon, the main container section's opacity changes. How can I achieve this effect? ...

javascriptjquerycss

What could be causing the href to malfunction on my local website?

I'm currently working on adding a new link that directs to a local HTML website within a menu list on a website. The main website is in ASPX format, but my focus is on the HTML version. The link I want to add leads to an HTML website stored on my loca ...

javascriptasp.nethtmlpermissions

Having trouble retrieving the value of the hidden field using ng-model

Hello, I'm currently learning AngularJS and facing some challenges with accessing hidden field values using ng-model. Specifically, I am working on an editing modal where I need to retrieve the ID for each record. Below is my controller code snippet: ...

javascripthtmlangularjs

I am encountering unexpected issues with the functionality of img srcset and sizes

Attempting to enhance the responsiveness of images on my website has led me to discover the srcset and sizes attributes. The objective is clear: If the screen size exceeds 600px or falls below 300px, a 250x250 image should be displayed For sizes in betw ...

htmlcssimageresponsive-designsrcset

What is the best way to superimpose an image onto a canvas?

I am working on a cool project where I have created a canvas that displays matrix binary code raining down. However, I would like to enhance it by adding an image overlay on top of the canvas. Here is my current setup: <div class="rain"> ...

javascripthtmlcss

Using Drupal to automatically adjust comment widths

My webpage features two div blocks that are set to a default width of 900px each. To make them adjust their width according to the text content, I used float: left; or display: inline-block; This caused the divs to resize based on the size of the text, b ...

htmlcssdrupal-7width

It appears that the font path specified in the @fontface css is not functioning properly

In my directory named project, I have subdirectories named html, assets, and javascript. The assets directory contains fonts and css directories. Within the css directory, there is a CSS file called typography.css. The fonts directory contains all the font ...

csstwitter-bootstrap-3

Screen resolution for the background image on the banner

I'm currently working on a website that can be found at this temporary link: The main banner of the site features a background image with fading text, which looks great on standard desktop screens. However, when viewed on wider screens like 1600x1200 ...

htmlcssresolutionscreen-resolution

What is the best way to declare a minimum and maximum date in HTML as the current date?

I have a question regarding setting the min/max date for a date input in my Angular 6 project. How can I ensure that only dates up to the current date are enabled? So far, I have attempted to initialize a new Date object in the ngOnInit function and set t ...

htmlangulartypescript

Showcasing a JSON attribute in the title using AngularJS

I'm struggling to display the Title of a table. Here is where I click to open a "modal" with the details: <td><a href="#" ng-click="show_project(z.project_id)">{{z.project}}</a></td> This is the modal that opens up with det ...

javascripthtmlangularjsjson

The material icons CDN does not seem to be functioning properly in Next.js

After adding a CDN to the head section of my Next.js project, I encountered an issue where it was not working as expected. import Head from "next/head"; <Head> <link href="https://fonts.googleapis.com/icon?family=Material+Ico ...

cssnext.jscdnheadgoogle-material-icons

Click the button to automatically generate a serial number on the form

My form includes three input fields: sl no, stationerytype, and stationeryqty. By clicking the symbols + and -, I can add or delete these fields. I am attempting to automatically generate a Sl no in the sl no field when I click the plus symbol, and adjust ...

javascriptphphtml