jquery 动态加载html,jQuery – 动态创建iframe并加载页面

[html]

/**

弹出iframe页面(iframe后面会添加灰色蒙版)

**/

function showIframe(url,w,h){

//添加iframe

var if_w = w;

var if_h = h;

//allowTransparency=’true’ 设置背景透明

$("").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)

//添加背景遮罩

$("

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();

});

}

[/html]

效果图:

e4f00db6597338299edb08f62bc3e380.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值