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

Adjusting the width of the container <div> will automatically resize the inner <div> to match

I have a main container element. .wrapper{ border:1px solid blue; position:relative; top:20%; left:30%; height: 300px; width: 350px; } When I adjust the width of the parent container, the child box does not reposition itself accor ...

javascripthtmlcss

Disabling Sidebars on Blog Articles Exclusively for Mobile Devices

I own the website Onthecomeupartists.com and am currently using the Impreza Theme 2.10 on WordPress 4.5.2. However, I want to enhance the mobile compatibility of my site by removing the sidebar on blog posts when viewed on mobile devices only, while keepin ...

htmlcsswordpress

Display updated text on hover over button panel

Is it possible to achieve the following using only CSS without any JavaScript? The desired outcome is a div containing two font awesome icons aligned to the right side. Specifically, I am looking for: - Icon of a pen that reacts on mouse hover - Icon o ...

htmlcssbuttonhover

preserve functionality when switching between pages

I have created two simple functions that can change the background color of the body. <script type="text/javascript"> function switchBackground(color){ document.body.bgColor=color; } </script> I am using links with onclick to execute thes ...

phpjavascripthtml

What methods can I use to make sure the right side of my React form is properly aligned for a polished appearance?

Trying to create a React component with multiple input field tables, the challenge is aligning the right side of the table correctly. The issue lies in inconsistent alignment of content within the cells leading to disruption in overall layout. Experimente ...

javascripthtmlcssreactjstypescript

The issue with hiding and showing elements using JavaScript during drag and drop functionality

In my code, I have two boxes with IDs box1 and box2, These boxes can be dragged and dropped into the boxleft element, Upon dropping them, the background image is removed and only the name appears in the box, My issue is that when loading values into box ...

javascripthtmlcss

What causes the lack of upward movement for a div element when the div above it is floated to the left?

Recently, I've been delving into the world of float property in CSS. This is the HTML code snippet I'm working with: .left { float: left; text-align: center; width: 25%; } .normal { text-align: center; width: 25%; } <div class="lef ...

htmlcsswebcss-float

Discover the steps to download web page data using Objective-C while ensuring that JavaScript has finished executing

I attempted something similar: NSString *url = @"http://www.example.com"; NSURL *urlRequest = [NSURL URLWithString:url]; NSError *error = nil; NSString *htmlContent = [NSString stringWithContentsOfURL:urlrequest encoding:NSUTF8StringEncoding error:&e ...

javascripthtmlobjective-c

In the realm of HTML Canvas, polygons intricately intertwine with one another

Currently, I am attempting to create multiple polygons from a large JSON file. Instead of being separate, the polygons seem to be connected in some way. The project is being developed in next.js. Below are the relevant code snippets: Canvas.tsx // ../co ...

cssreactjsnext.jshtml5-canvaspolygon

Deactivate user input depending on a certain requirement

Greetings everyone, I am currently working with the following code snippet: <table class="details-table" *ngIf="peop && peopMetadata"> <tr *ngFor="let attribute of peopMetadata.Attributes"> <td class="details-property"&g ...

htmlangulartypescript

PHP code for uploading multiple images at once

I am currently facing an issue with uploading multiple files at once and not getting the desired result. Below is my code snippet: <?php if (isset($_FILES['uploadfiles'])) { print_r($_FILES); } ?> <form action="index.php" method="po ...

phphtmlimage

Is there a way to ensure uniform font display across all browsers?

Is there a way to ensure consistent font display across all browsers? I am facing an issue with font consistency on my webpage. While browsers like Internet Explorer Edge and 11, Chrome, and Firefox display the desired font correctly, Internet Explorer 8 ...

htmlcssinternet-explorerfonts

Inject a <div> element into a table row upon clicking a button using jQuery and PHP

I am faced with an issue regarding displaying pdf reports within specific table rows. The scenario involves a table containing folder paths and buttons in each row. Upon clicking the button, the path is sent to a sequence of PHP files (ajax.php, ajax2.php, ...

phphtmljquery

What is the best way to clear the selected option in a dropdown menu when choosing a new field element?

html <div class="row-fluid together"> <div class="span3"> <p> <label for="typeofmailerradio1" class="radio"><input type="radio" id="typeofmailerradio1" name="typeofmailerradio" value="Postcards" />Postcards& ...

javascriptjqueryhtmlcssdrop-down-menu

Creating a rotating wheel using JavaScript that is activated by a key press event

I need some help with implementing a keystroke event in this code so that the spinning wheel can start based on a key press, like the spacebar. Any suggestions on how to achieve this? I have found an event code for keystrokes in JavaScript: document.body. ...

javascripthtml

Disable automatic playback of HTML video

There is an HTML video with an image that loads initially and then disappears to play the video. I would like the image to always be visible until I click on it. Once clicked, the video should start playing. You can view the code on JSFiddle: http://jsf ...

javascriptjqueryhtmlcss

Storing various duplicates of items in local storage

Looking for help with storage settings in HTML/JavaScript as I work on a mobile not taking app using Phonegap. My goal is to allow users to input a note name and content, save them into a jquery mobile list, and see them on the home screen. However, I&apos ...

javascripthtmlcordovajquery-mobilelocal-storage

Transforming a Processing (cursor) file into an interactive webpage

I have created a custom cursor using Processing and now I want to incorporate it into my website. Is there a way to convert the cursor into a .java file so that I can include it in my HTML file? ...

javascriptjavahtmlcursorprocessing

Can Django implement pagination without altering the URL structure?

I discovered the fundamentals of pagination in Django at this resource: Nevertheless, I am faced with a challenge - I wish to implement pagination without modifying the URL. Specifically, I need to paginate a single table among multiple tables on an HTML ...

pythonhtmldjangohtml-tablepagination

Guide to dynamically altering the header logo as you scroll further

I'm attempting to dynamically change the logo in my header based on how far I've scrolled down the page. While I have experimented with libraries like Midnight.js, I specifically need to display an entirely different logo when scrolling, not just ...

jqueryhtmlcssheader