jquery 通過css 彈出懸浮框的辦法
阿新 • • 發佈:2018-11-17
1是在body後面append一個div,div的position是absolute,位置大小是整個document的大小。這樣就把頁面全部變灰了。
2是把彈出的那個div顯示出來,position也是用absolute。設定位置
js內容
var ShowBox = function(o, option) { var docheight = $(document).height(); $("body").append("<div class='Box-background'></div>"); $(".Box-background").css({ "opacity" : "0.6", "height" : docheight }); var winHeight = document.documentElement.clientHeight; var winWidth = document.documentElement.clientWidth; $(o).css({ "top" : (200 + (winHeight - o.height()) / 2) + "px", "left" : (winWidth - o.width()) / 2 + "px" }).show(); };
ShowBox($(".nwd-float"));
html內容
<div class="Windows nwd-float"> <div class="nwd-closediv"><a href="javascript:" class="nwd-close"></a></div> <div class="nwd-content"> <span id="takeSuccSpan"></span> <a href="/xiangmu/"></a> </div> </div>
css內容
.Box-background { background: none repeat scroll 0 0 #000000; display: block; left: 0; position: absolute; top: 0; width: 100%; z-index: 100; } .Windows { color: #643B1B; display: none; left: 0; position: absolute; top: 0; width: 503px; z-index: 204; }