Question

我正在创建自己的模态，这是我的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);
    }
}

HTML：

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

.modal指的是灰色的背景，而.modal-content指的是弹出的框。

问题是灰色背景仅覆盖浏览器窗口，当我向下滚动以查看模态框的其余部分时，灰色背景停止，我可以看到我的页面内容。

我可以用固定的位置解决这个问题，但是你无法看到.model-content的全部内容。

Answer 1

怎么样？

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

Answer 2

我有一个决定权，我在this post（俄语）中有描述。它是一个jquery插件，但你只能使用样式。

Demo和github

简而言之：当模态可见时，我们将lock类名称添加到body元素（body.lock {overflow: hidden} - 阻止正文滚动）。

div.shim是一个全屏模式背景（position: fixed），它有overflow: auto，可以滚动模态内容（不是正文的内容）。

HTML标记：

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

（我是非英语母语人士，如果需要，请随时纠正我的答案）

Answer 3

将width:100%;和height:100%;替换为您的min-width:100%;课程的min-height:100%;和.modal似乎可以解决您的问题。

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

Answer 4

你需要添加位置：固定为.modal，当你向下滚动页面时它会移动。然后我会将.modal-content改为：

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

你应该自己拥有'灰色'div。像这样：

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

然后将灰色的div固定在位置上，我将模态内容div垂直和水平地居中

但问题更多的是你的灰色div

这是一个小提琴：http://jsfiddle.net/uj9Gg/2/

创建模态？

5 个答案: