js弹窗效果实现

1.首先准备好要弹出的内容,一般用ajax向后台请求数据,组装成html:

主页:a.html,含有div:

<div class="cms-window cms-window-other zadd-window salePrd-window">
</div>

副页:b.html

把副页展示在div标签上

2.数据已经组装完成,然后画出要展示内容的高和宽:

function getPos($tar) {
var h = document.body.offsetHeight;
var w = document.body.offsetWidth;
var tarh = $(".cms-body").height();
// var top = (h + tarh) / 2 - $($tar).height() / 2;
var top = h / 2 - $($tar).height() / 2;
var left = w / 2 - $($tar).width();
// console.log(top);
if (top < 0)
top = 0;
return {
'top' : top + "px",
'left' : left + "px"
};
}

3.div.show().css(getPos(classType));

4.主页半透明:

$(".mask").show();

.mask {

1. position: fixed;
2. top: 0;
3. left: 0;
4. background-color: #000;
5. z-index: 10003;
6.  

   filter: alpha(opacity=50);

7. opacity: .5;

}