html弹出窗口加载别的页面地址,仿layer.open打开新窗口URL,自适应URL页面高度
layer.open打開新窗口URL,不能在彈出窗口的同時根據(jù)所打開URL地址頁面的大小,彈出的同時自適應(yīng)窗口大小,所以根據(jù)需要自己寫了一個,請參考指正。
首先加載jquery
下面是js代碼:
// 2016-08-10 自適應(yīng)彈窗插件
var?wlayer?=?{
node:?null,
url:?null,
popup:?function()?{
this.url?=?arguments[0];
this.count?=?arguments[1];
this.addShade();
this.addIframe(this.url);
this.dishow();
},
close:?function()?{
this.node?=?$(window.parent.document);
this.node.find("iframe#popup").remove();
this.node.find("div#wshade").remove();
},
//?添加?iframe?框
addIframe:?function()?{
var?html?=?'';
$('body').append(html);
this.loadStyle();
},
loadStyle:?function()?{
$('iframe#popup').load(function()?{
$(this).css({?"position":?"fixed",?"z-index":?"999",?"width":?"683px"?});
var?frameCon?=?$(this).contents().find("body");
var?pwidth?=?frameCon.width();
var?pheight?=?frameCon.height();
$(this).height(pheight?+?2);
var?top?=?($(window).innerHeight()?-?$(this).outerHeight())?/?2;
var?left?=?($(window).innerWidth()?-?$(this).outerWidth())?/?2;
$(this).css({?"top":?top,?"left":?left,?"border":?"1px?solid?#ccc"?});
$('div#wshade').show();
});
},
dishow:?function()?{
$('iframe#popup').show();
},
addShade:?function()?{
var?shadeHtml?=?'';
$('body').append(shadeHtml);
$('div#wshade').css({
"position":"fixed","top":"0","left":"0",
"z-index":"998","width":"100%","height":"100%"
});
$('div#wshade').css({
"background-color":"#333","filter":"alpha(opacity=30)",
"-moz-opacity":?"0.3","opacity":"0.3"
});
}
};
使用用例:
1.彈窗顯示指定URL地址
wlayer.popup(url);
2.關(guān)閉彈窗
wlayer.close();
如有改進(jìn)已經(jīng),請聯(lián)系站長。
總結(jié)
以上是生活随笔為你收集整理的html弹出窗口加载别的页面地址,仿layer.open打开新窗口URL,自适应URL页面高度的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: html 抓取 post 请求,java
- 下一篇: html天气插件iframe,分享常用7