仿layer.open打开新窗口URL,自适应URL页面高度

技术探讨  2016-09-05 15:14   16029 layer open 自适应

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

如有改进已经,请联系站长。

注:转载请注明出处为http://www.sandbean.com/article/20.html。

沙豆网 站长

追求卓越,奋斗不息!

167
文章
8382
点赞

更多文章