layer.open打开新窗口URL,不能在弹出窗口的同时根据所打开URL地址页面的大小,弹出的同时自适应窗口大小,所以根据需要自己写了一个,请参考指正。
首先加载jquery
下面是js代码:
// 2016-08-10 自适应弹窗插件
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.关闭弹窗
wlayer.close();
如有改进已经,请联系站长。
热门文章