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" });
});