html+css+js实现弹出框+遮罩层

最近看到好多童鞋都在找弹出框和遮罩层的实现。

先来说遮罩层是个神马？

其实就是你弹出个东西，然后其他地方变黑了一点。就像遮住了其他地方一样。

那么实现原理呢？

就是设置一个div，宽度，高度是屏幕视口那个大（当然，如果你的document超出了window的大小，那么设置的时候最好还是用document），设置一个 z-index 属性，让它在弹出框下面，在其他地方的上面。原理就是这样啦！

话不多说，接下来上代码：

html：

   
   
   
   


  弹出对话框

 
 

   
   
   

js：pop.js

/**
 * function: 产生弹出框
 * author: 杨勇
 * time: 2015-4-17
 * describe: 依赖jquery
 */
var winWidth,
  winHeight,
  docWidth,
  docHeight,
  popWidth,
  popHeight,
  popTop,
  popLeft,
  parentId,
  popId,
  text;

/**
 * 创建pop
 * @param parentId：存放弹出框的容器ID，里面不能包含任何代码，包括空格，换行，注释等。
 * @param popId：弹出框的ID。
 * @param popWidth：pop框的宽度
 * @param popHeight：pop框的高度
 * @param popHeight：pop框的具体html代码
 */
function openPop(parentId, popId, popWidth, popHeight,text){
  this.parentId = parentId;
  this.popId = popId;
  this.text = text;
  this.popWidth = popWidth;
  this.popHeight = popHeight;
  setPopPosition();
  createPop(parentId, popId);
}

/**
 * 设置弹出框位置，这里为屏幕正中。
 * @param pop
 * @param popWidth
 * @param popHeight
 */
function setPopPosition(){
  winWidth = $(window).width();
  winHeight = $(window).height();
  docWidth = $(document).width();
  docHeight = $(document).height();
  popTop = (winHeight - popHeight)/2;
  popLeft = (winWidth - popWidth)/2;
}

function createPop(parentId,popId){
  var str = '

'+ text;
  $(parentId).html(str);
  $(".yy-cover").css({"display":"block","width":winWidth + "px","height":docHeight + "px"});
  $(popId).css({"display":"block","top": popTop + "px","left":popLeft + "px"});
}

/**
 * 改变窗口大小时重置pop框的位置
 */
$(window).resize(function(){
  setPopPosition();
  if($(parentId).html() != ""){
    $(".yy-cover").css({"display":"block","width":winWidth + "px","height":docHeight + "px"});
    $(popId).css({"display":"block","top": popTop + "px","left":popLeft + "px","transition":"all .5s ease"});
  }
})

O啦！

下载：http://download.csdn.net/detail/yy839126257/8604301