怎么用js 动态增加蒙板 内嵌网页内容

$()和$c()分别表示
$(id),获取该id的对象,document.getelementbyid(id)
$c(tag),创建一个标签, document.createelement(tag);

//初始化导航背景,iframe容器

function fndaohangbg()
{
var h = fngetheight(),w = fngetwidth();//获取背景窗口大小
if(!$('divdaohangbg'))
{
var div = $c('div');//创建背景蒙板
div.id = 'divdaohangbg';
div.style.backgroundcolor = 'black';
div.style.position = 'absolute';
div.style.filter = 'alpha(opacity=80)';
div.style.opacity = '.80';
div.style.zindex = 100001;
div.style.left = 0;
div.style.top = 0;
div.style.width = w+'px';
div.style.height= h+'px';
document.body.appendchild(div);
}

if(!$('divdaohangbgiframe'))
{
var iframe;
iframe = this.$c('iframe');//创建蒙板内的内嵌iframe容器,用于嵌入显示其他网页
iframe.id = 'divdaohangbgiframe';
iframe.frameborder = '0';
iframe.scrolling = "no";
iframe.style.overflow = 'hidden';
iframe.allowtransparency = 'true';
iframe.style.display = 'none';
iframe.style.width = w+'px';//800
iframe.style.height = h+'px';//620
iframe.style.margintop = '75px';//800
$('divdaohangbg').appendchild(iframe);
}
if(!$('divdaohangbgclose'))
{
var div = $c('div');//创建关闭按钮在蒙板上
div.id = 'divdaohangbgclose';
div.style.position = 'absolute';
div.style.backgroundimage='url(images/closb.gif)';
div.style.zindex = 100003;
div.style.right = 10;
div.style.top = 20;
div.style.width = '82px';
div.style.height= '30px';
div.title='关闭';
div.style.cursor='hand';
div.onclick=function(){//点击时间 ,关闭蒙板
fndaohangbgclose();
};
$('divdaohangbg').appendchild(div);
}
$('divdaohangbgiframe').style.display='block';
$('divdaohangbg').style.display='block';
}
//关闭蒙板
function fndaohangbgclose()
{
if(!$('divdaohangbg')){return;}
if(!$('divdaohangbgiframe')){return;}
$('divdaohangbgiframe').src='';
$('divdaohangbgiframe').style.display='none';
$('divdaohangbg').style.display='none';
}
//调用,内嵌url
function fndaohangbgshow(url)
{
fndaohangbg();
$('divdaohangbgiframe').src=url;
}

总结
用于在现有窗口上加载蒙板,在蒙板内在嵌入其他页面内容

 

时间: 2024-09-19 22:39:39

怎么用js 动态增加蒙板 内嵌网页内容的相关文章

javascript 窗口加载蒙板 内嵌网页内容_javascript技巧

复制代码 代码如下: //初始化导航背景,iframe容器 function fnDaoHangBg() { var h = fnGetHeight(),w = fnGetWidth();//获取背景窗口大小 if(!$('divDaoHangBg')) { var div = $C('div');//创建背景蒙板 div.id = 'divDaoHangBg'; div.style.backgroundColor = 'black'; div.style.position = 'absolut

js动态增加删除行

js动态增加删除行代码,很实用. 所做过的多个项目中均用到js动态添加删除行的应用,在写过多种方案后,最终整理出这个最为方便应用的方案,以备日后拿来便用: 以下是DEMO全部代码: <html>  <head>   <title>Ace Test</title> <script language="JavaScript">      var cGetRow=-99999;   function insertrow(){   v

js动态增加删除上传附件代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

jsp 内嵌网页内容--iframe

js|网页 ZZzzz~ may wind <Iframe src="/URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe> src:文件的路径,既可是HTML文件,也可以是文本.ASP等: width.height:"画中画"区域的宽与高: scrolling:当SRC的

关于JS动态增加表单元素的问题。。。。

问题描述 function addRow() { var topicsTable = document.getElementById("tbl"); var newTR = tbl.insertRow(tbl.rows.length); var newNameTD = newTR.insertCell(0); newNameTD.innerHTML="<td> <s:action name="pshowAll" /></td&

JS动态增加删除UL节点LI及相关内容示例_javascript技巧

复制代码 代码如下: <ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);">del</a></li> <li id=2 >22222222222222222<a href="javascript:del(2);">del</a></li> <li id=

js动态增加表格

function loadaddhousesub_callback(res) {     var area=document.getElementById("ddlarea");     var tbl=res.value;     if(tbl)     {         area.options.length=0;         for(var i=0;i<tbl.Rows.length;i++)         {             var n=tbl.Rows[

js动态增加表格行列代码

表头   表尾   当我点击"添加行"按钮时候,在[表头]下面,[表尾]上面添加一行

JS动态修改iframe内嵌网页地址的方法_javascript技巧

本文实例讲述了JS动态修改iframe内嵌网页地址的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码通过修改iframe的src属性动态修改iframe的内嵌网页 <!DOCTYPE html> <html> <head> <script> function changeSrc() { document.getElementById("myframe").src="http://google.com"; }