Creating a Modal?

Question

I'm creating my own modal, here's my CSS:

.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;

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

And the HTML:

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

.modal refers to the greyed out background and .modal-content refers to the box that pops up.

The problem is that the greyed background only covers the browser window, when I scroll down to see the rest of my modal box, the greyed background stops and I can see my pages content.

I can fix this with a fixed position, but then you can not see the entire content of .model-content.

You are using sass right? it's not indicated. Can you make a jsfiddle? — Yoann Augen, Dec 09 '13 at 14:54
What if you make the content scrollable instead by giving it a max height and setting the overflow property? — TreeTree, Dec 09 '13 at 14:55
Are you using LESS or SASS, if not, you can't nest CSS commands like that — James King, Dec 09 '13 at 14:55
I think we can safely assume he is using LESS or SASS since his question isn't "Help my css isn't working at all". — TreeTree, Dec 09 '13 at 14:56

score 1 · Answer 1 · answered Dec 09 '13 at 16:21

What about that?

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

HTML:

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

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

score 0 · Answer 2 · answered Dec 09 '13 at 14:58

0

I have a decision for you, it is described in this post (russian). It is a jquery plugin, but you can use only styles.

Demo and github

In few words: when modal is visible we add lock class name to body element (body.lock {overflow: hidden} — prevents body scrolling).

div.shim is a fullscreen modal background (position: fixed) and it has overflow: auto, which provides possibility to scroll modal content (not content of the body).

HTML markup:

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

(I'm a non-native english speaker, feel free to correct my answer if need)

answered Dec 09 '13 at 14:58

Alex Fitiskin

755
4
6

I'm not sure what you are talking about. Thanks anyway. – panthro Dec 09 '13 at 15:07
This demo allows scrolling with Chrome using the wheel button. I can see the content scrolling under the modal. – DNT Dec 09 '13 at 15:10
@panthro look at the demo: click on `Open modal` link and in modal window click at `add more content` link. I think, it is that you need. – Alex Fitiskin Dec 09 '13 at 15:16
@DNT Sorry, I have no mouse with wheel, but on touchpad there is no possibility to scroll body content, scroll works only for modal window content. – Alex Fitiskin Dec 09 '13 at 15:18

block14 · Answer 3 · 2013-12-09T18:49:01.957

Replacing width:100%; and height:100%; with min-width:100%; and min-height:100%; for your .modal class seems to fix your issue.

.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/

score 0 · Answer 4 · answered Dec 09 '13 at 15:01

You do need to add position:fixed to .modal other it will move as you scroll down the page. I would then alter .modal-content to:

.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;
}

score 0 · Answer 5 · answered Dec 09 '13 at 15:08

0

You should have the 'greyed out' div on its own. Like so:

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

And then fix position the greyed out div and I centered the modal content div vertically and horizontally

But the problem was more with your greyed out div

here's a fiddle: http://jsfiddle.net/uj9Gg/2/

answered Dec 09 '13 at 15:08

toast

660
1
5
12

Thanks, this works,although my underlying page now scrolls when the user scrolls, how can I fix this? – panthro Dec 09 '13 at 15:19
I cannot think of a way to do this with css, so I thought if you could see when the modal has a class of visible put overflow: hidden on the body else remove it: http://jsfiddle.net/uj9Gg/3/ I'm not sure this is what you meant because you mentioned when you scroll you can see your content, but now you don't want it to scroll. But you get the idea of what I did. – toast Dec 09 '13 at 15:31
Yes, overflow hidden does work. Although now my rather large modal does not scroll. Any idea how to make it scroll? – panthro Dec 09 '13 at 15:37
Looks like I completely misunderstood you. Have a look at this: http://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened – toast Dec 09 '13 at 15:50

Creating a Modal?

5 Answers5