JQuery------制作div模态框

转载：

http://blog.csdn.net/li_xiao_ming/article/details/6738922

 

如图:

 

 

代码：

html(使用opacity的话content无法变为不透明，所有这里使用了background：rgba(0,0,0,0.3))属性来设置透明

<button class = 'btn'>点击显示</button>
<div class = "bg-model" style="position:absolute;top:0%;left:0%;display:none;background:rgba(0,0,0,0.3);width:100%;height:100%;position:fixed;z-index:9999">
　　<div class = 'content' style="position: absolute;left: 35%;top: 25%;border-radius: 8px;width: 30%;height: 40%;background-color: #fff;">
　　</div>
</div>

js

//加入购物车点击事件
$(".cart-add").click(function () {
　　$(".bg-model").fadeTo(300,1)
　　//隐藏窗体的滚动条
　　$("body").css({ "overflow": "hidden" });
});

//模态框OK按钮点击事件
$(".bg-model-ok").click(function () {
　　$(".bg-model").hide();
　　//显示窗体的滚动条
　　$("body").css({ "overflow": "visible" });
}).hover(function () {
　　$(this).css({ "backgroundColor": "#8CC8C8" });
}, function () {
　　$(this).css({ "backgroundColor": "#8CD4E6" });
});