使用iframe加载页面并以子窗体方式显示

//使用iframe加载页面并以子窗体方式显示
var SubWindow = function (width, height, onClosedCallBack) {
    var that = this;
    this.width = width;
    this.height = height;
    this.src = '';
    this.onClosedCallBack = onClosedCallBack;
    this.id = '';
    this.container = '';
    this.iframe = '';
    this.btnClose = '';
    this.paddingTop = 25;
    this.zIndex = 1;

    SubWindow.prototype.guid = function () {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,
            function (c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
    };
    this.id = this.guid();
    this.Init = function () {
        //容器
        $(document).find('body').append('<div id="' + that.id + '"></div>');
        that.container = $('#' + that.id)
            .css('max-width', '1024px')
            .css('max-height', '640px')
            .css('position', 'absolute')
            .css('display', 'none')
            .css('top', '50%')
            .css('left', '50%')
            .css('right', '0')
            .css('bottom', '0')
            .css('transform', 'translate(-50%, -50%)')
            .css('box-shadow', '-4px 2px 6px #868686, 4px 2px 6px #868686')
            .css('width', that.width)
            .css('height', that.height)
            .css('padding-top', that.paddingTop)
            .css('background-color', '#65B2DE');

        //关闭按钮
        that.container.append(' <button type="button" class="btnClose">X</button>');
        that.btnClose = that.container.find('.btnClose')
            .css('position', 'absolute')
            .css('top', 0)
            .css('right', 0)
            .click(function () {
                that.container.hide();
                that.container.css('z-index', that.zIndex);
                //执行回调函数
                if (that.onClosedCallBack != null) {
                    that.onClosedCallBack();
                }
            });

        //iframe
        that.container.append('<iframe></iframe>');
        var iframeHeight = that.height - that.paddingTop + 5;
        that.iframe = that.container.find('iframe')
            .css('width', '100%')
            .css('height', iframeHeight + 'px');

        //创建小方块的鼠标点按下事件(拖拽)
        that.container.mousedown(function (event) {
            //获取鼠标按下的时候左侧偏移量和上侧偏移量
            var oldLeft = event.pageX; //左侧偏移量
            var oldTop = event.pageY; //竖直偏移量

            //获取鼠标的位置
            var oldPositionLeft = that.container[0].offsetLeft;
            var oldPositionTop = that.container[0].offsetTop;

            //鼠标移动
            $(document).mousemove(function (e) {
                var newLeft = e.pageX; //新的鼠标左侧偏移量
                var newTop = e.pageY; //新的鼠标竖直方向上的偏移量

                //计算发生改变的偏移量是多少
                var changX = newLeft - oldLeft;
                var changeY = newTop - oldTop;

                //计算出现在的位置是多少
                var newPositionLeft = oldPositionLeft + changX;
                var newPositionTop = oldPositionTop + changeY;

                that.container.css({
                    left: newPositionLeft + 'px',
                    top: newPositionTop + 'px'
                });
            });
            that.container.mouseup(function () {
                $(document).off("mousemove");
            });
        });
    };
    SubWindow.prototype.maxZ = function () {
        var z = Math.max.apply(null,
             $.map($('body > *'),
                 function (e, n) {
                     return parseInt($(e).css('z-index')) || 1;
                 })
         );

        return z;
    };
    this.show = function (url) {
        that.iframe.attr("src", url);
        that.zIndex = that.container.css('z-index');
        var z = that.maxZ();
        that.container.css('z-index', z + 1);
        that.container.show();
    };

    that.Init();
    return that;
};

 

var  editWindow = new SubWindow(600, 400, function () { refresh() });

 $('.editLink').click(function (e) {
            var url='www.xxx.com';
            editWindow.show(url);
        });