效果图




相关代码
灰色背景

[HTML] 纯文本查看 复制代码

<div id="gray" style="display: block;"></div>

#gray {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0px;
  display: none;//click事件激发function当触发的时候改变成为block
  z-index: 99;//z轴
 }

弹出层

[HTML] 纯文本查看 复制代码

<div class="popup" id="popup" style="top: 238.667px; left: 75.5px; cursor: default; display: block;">
 ....其中内容忽略
</div>

#popup {
  width: 600px;
  height: auto;
  background-color: #fff;
  position: absolute;
  z-index: 100;
  border: 1px solid #ebeaea;
  left: 400px;//left与top由center()控制
  top: 96px;
  display: none;////click事件激发function当触发的时候改变成为block
 }

相关的js

[HTML] 纯文本查看 复制代码

 
//点击关闭按钮
$("xxxx").click(function() {
    $("#gray").hide();
    $("#popup").hide();
});
//窗口水平居中
$(window).resize(function() {
    center();
});

function center() {
    var _top = ($(window).height() - $(".popup").height()) / 3;
    var _left = ($(window).width() - $(".popup").width()) / 2;
    $(".popup").css({
        top: _top,
        left: _left
    });
}

为什么图片在下面呢.

顶顶顶顶顶顶顶顶顶顶顶顶

<div id="gray" style="display: block;"></div>

#gray {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0px;
  display: none;//click事件激发function当触发的时候改变成为block
  z-index: 99;//z轴
}