html如何加邊框，html怎么添加遮罩層,如何在瀏覽器窗口上添加一個遮罩層

背景

在web2.0中，頁面彈窗是一個很常見的交互方式，這樣既可以避免不必要的頁面跳轉，也可以改進界面的布局和可交互性。

但是，瀏覽器原生的彈窗函數(alert, confirm,

prompt)有著很大的局限性，主要是它們的展現UI一來很不美觀，二來也不夠靈活，因此，我們經常需要自行定義彈窗函數。

當我們要實現一個模式彈窗時(模式彈窗，即是說出現彈窗時，頁面其它地方不可點擊)，通常的做法是用一個div將整個頁面窗口遮擋住。

html如何加邊框。實現

下面，我們一步步地實現一種較為簡潔有效的遮罩層：

Step 1:

首先我們要考慮定義一個遮擋瀏覽器窗口的div，考慮下面一段html+css代碼：

<divunselectable="on"style="background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;">div>

它可以實現遮擋瀏覽器窗口的功能，其中幾個需要注意的css屬性分別解釋如下：

html居中代碼？1) background:#000: 將div的背景色設置為黑色; filter:alpha(opacity=10):

在IE下，將div的透明度設置為0.1; opacity:.1: 在非IE下，將div的透明度設置為0.1

以上三個屬性聯合起來，實現了頁面其余元素的“被擋住但可見”的效果。

2) left:0px;top:0px;position:fixed;height:100%;width:100%:

定義div的高度和寬度分別是瀏覽器高度和寬度的100%。這里有個小技巧，如果div的position是fixed或者absolute，那么當div的高度設置為百分比(例如100%)時，div的高度將參照瀏覽器可視區域(viewport)的高度來計算。此外，設置position為fixed，可以使得瀏覽器即使在scroll或resize時也保證遮罩層一直擋在頁面的可視區域。

3) overflow:hidden 用來避免滾動條的出現。

html表單標簽，Step 2:

細心的讀者應該可以發現上述的css代碼并不適用于IE

6，原因有兩個：一來，IE6不支持position:fixed；二來，更重要的是，在IE

6中，height:100%不起作用，div的高度不再參照瀏覽器可視區域的高度。

修正第一個缺陷很簡單，只需用css hack，加上 _position:absolute 就行。

修正第二個缺陷，我們需要借助javascript，_height:expression_r(document.body.clientWidth);

html表格、動態地計算出遮罩層的高度和寬度，特別注意的是，為保證遮罩層在頁面滾動時也遮住窗口，遮罩層的高寬應該覆蓋住滾動區域。

動態計算的代碼如下，其中mask變量指向遮罩層：

function calculateSize() {

var b =

document.documentElement.clientHeight ? document.documentElement :

document.body,

html換行？height = b.scrollHeight > b.clientHeight

? b.scrollHeight : b.clientHeight,

width = b.scrollWidth > b.clientWidth ?

b.scrollWidth : b.clientWidth;

mask.css({height: height, width: width});

}

html文件怎么打開，此外，還需注意到，當頁面大小發生變化時，要重新計算遮罩層的高寬，否則可能會新擴大的區域沒有被遮罩。

function resize() {

calculateSize();

$(window).on(“resize”, calculateSize);

}

Step 3:

html，通過Step 1和Step

2，我們基本上已完成了構建遮罩層的工作。但工作并未完成，在IE6下，還需考慮一些特殊的情況：當頁面上存在select元素的時候，遮罩層將無法遮住select元素，這是IE

6的一個著名bug，解決方案是在遮罩層中增加一個iframe。

Html+css代碼如下：

<div

unselectable="on" style="display:none;background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;_position:absolute;height:100%;width:100%;overflow:hidden;z-index:10000;"><div

html5，style="position:absolute;width:100%;height:100%;top:0;left:0;z-index:10;background-color:#000">div><iframe

border="0" frameborder="0" allowtransparency="true"

style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:1">iframe>div>

有幾個小技巧需要稍作解釋：

1) iframe的樣式使用 width:100%;height:100%;

，這是可行的，因為它的父定位元素的高寬已經確定了

html邊框透明度怎么設置、2)

在遮罩層內部，除了一個iframe外，還增加了一個div，并且該div和iframe的position都是absolute，div的z-index大于iframe的z-index，這樣一來，就使得內部div遮擋住了iframe。這具有現實意義：使得頁面的一些事件(例如onclick,

onmouseup, onmousemove)依然會被響應在本頁面上，而不是被iframe截獲。

3) allowtransparency="true":

使iframe透明，防止頁面黑屏。

代碼示例

html怎么設置透明、綜合以上的分析，整體的實現代碼如下，大家可以參考一下：

var windowMask = (function($) {

var isIE6 = $.browser.msie &&

$.browser.version == "6.0";

var mask = '

';

CSS實現遮罩層，isIE6 && (mask = '

');

mask = $(mask);

$("body").append(mask);

function show() {

isIE6 && resize();

css遮罩層怎么做。mask.show();

}

function hide() {

isIE6 && $(window).off("resize",

calculateSize);

mask.hide();

html設置div背景色透明、}

function calculateSize() {

var b = document.documentElement.clientHeight ?

document.documentElement : document.body,

height = b.scrollHeight > b.clientHeight ?

b.scrollHeight : b.clientHeight,

html內邊框和外邊框怎么設置。width = b.scrollWidth > b.clientWidth ?

b.scrollWidth : b.clientWidth;

mask.css({height: height, width: width});

}

function resize() {

calculateSize();

css遮罩層從下往上、$(window).on("resize", calculateSize);

}

return {

show: show,

hide: hide

};

})();

使用很簡單，當需要展現遮罩層時，調用

windowMask.show()，要移除遮罩層時，調用 windowMask.hide()。