使用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({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