黑马程序员技术交流社区

标题: 怎么做弹出层 [打印本页]

---

作者: 香菇    时间: 2016-11-9 19:17
标题: 怎么做弹出层
效果图




相关代码
灰色背景

[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

    });

}

f8a174ca-399b-444f-b546-72501b7802f0.jpg (37.99 KB, 下载次数: 25)

下载附件

2016-11-9 19:16 上传

---

作者: 香菇    时间: 2016-11-9 19:18
为什么图片在下面呢.

---

作者: 香菇    时间: 2016-11-10 08:50
顶顶顶顶顶顶顶顶顶顶顶顶

---

作者: mfsara    时间: 2016-11-12 00:04
<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轴
}

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2