使用jQuery可以方便的创建html对象。下面例子是通过传入的url和宽度高度，动态的在页面中央创建一个iframe并加载内容。同时在iframe后面还会添加一个灰色的遮罩，点击遮罩便可以移除iframe和遮罩。
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<html>
<head>
<script language=
"JavaScript"
src=
"jquery-1.11.1.min.js"
type=
"text/javascript"
></script>
<script language=
"JavaScript"
type=
"text/JavaScript"
>
/**
弹出iframe页面(iframe后面会添加灰色蒙版)
**/
function
showIframe(url,w,h){
//添加iframe
var
if_w = w;
var
if_h = h;
//allowTransparency='true' 设置背景透明
$(
"<iframe width='"
+ if_w +
"' height='"
+ if_h +
"' id='YuFrame1' name='YuFrame1' style='position:absolute;z-index:4;' frameborder='no' marginheight='0' marginwidth='0' allowTransparency='true'></iframe>"
).prependTo(
'body'
);
var
st=document.documentElement.scrollTop|| document.body.scrollTop;
//滚动条距顶部的距离
var
sl=document.documentElement.scrollLeft|| document.body.scrollLeft;
//滚动条距左边的距离
var
ch=document.documentElement.clientHeight;
//屏幕的高度
var
cw=document.documentElement.clientWidth;
//屏幕的宽度
var
objH=$(
"#YuFrame1"
).height();
//浮动对象的高度
var
objW=$(
"#YuFrame1"
).width();
//浮动对象的宽度
var
objT=Number(st)+(Number(ch)-Number(objH))/2;
var
objL=Number(sl)+(Number(cw)-Number(objW))/2;
$(
"#YuFrame1"
).css(
'left'
,objL);
$(
"#YuFrame1"
).css(
'top'
,objT);
$(
"#YuFrame1"
).attr(
"src"
, url)
//添加背景遮罩
$(
"<div id='YuFrame1Bg' style='display:block;z-index:3;position:absolute;left:0px;top:0px;filter:Alpha(Opacity=30);/* IE */-moz-opacity:0.4;/* Moz + FF */opacity: 0.4; '/>"
).prependTo(
'body'
);
var
bgWidth = Math.max($(
"body"
).width(),cw);
var
bgHeight = Math.max($(
"body"
).height(),ch);
$(
"#YuFrame1Bg"
).css({width:bgWidth,height:bgHeight});
//点击背景遮罩移除iframe和背景
$(
"#YuFrame1Bg"
).click(
function
() {
$(
"#YuFrame1"
).remove();
$(
"#YuFrame1Bg"
).remove();
});
}
</script>
</head>
<body>
</body>
<html>
|
效果图：
原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_434.html