js彈出層或者js彈出引用url Frame 層

function Popup() {
    var _this = this;
    this.CssName = "layermask";//樣式
    //遮蓋層
    this.hiddLayer = function() {
        try{
            var obj = document.getElementById("syspopup_layer");
            if (obj != null)
                document.body.removeChild(obj);
        }catch(e){}
    };

    this.showLayer = function() {
        try{
            var obj = document.getElementById("syspopup_layer");
            if (obj == null) {
                obj = document.createElement("DIV");
                obj.id = "syspopup_layer";
                obj.className = this.CssName;
                obj.disabled = true;
                document.body.appendChild(obj);

                var size = qp_shared.getPageSize();

                obj.style.cssText = qp_shared.contact("left: 0px; width: ", size.width, "px; top: 0px; height: ", size.height, "px;");
            }
        }catch(e){}
    };

    this.showLoading = function() {
            if (el("sysimg_wait") == null) {
            this.Loading = document.createElement("IMG");
            this.Loading.id = "sysdiv_wait";
            this.Loading.src = qp_shared.getURL("images/wait/reloading.gif");
            this.Loading.style.zIndex = 999999;
            this.Loading.style.position = "absolute";
            this.Loading.style.left = parseInt((window.document.documentElement.clientWidth - 24)/2) + "px";
            this.Loading.style.top = (parseInt((window.document.documentElement.clientHeight - 24)/2) + qp_shared.getDocumentScrollTop()) + "px";

            document.body.appendChild(this.Loading);
        };

        this.showLayer();
    };

    this.Render = function(url, w, h) {
        if (el("sysimg_wait") == null) {
            this.Loading = document.createElement("IMG");
            this.Loading.id = "sysdiv_wait";
            this.Loading.src = qp_shared.getURL("images/wait/reloading.gif");
            this.Loading.style.zIndex = 999999;
            this.Loading.style.position = "absolute";
            this.Loading.style.left = parseInt((window.document.documentElement.clientWidth - 24)/2) + "px";
            this.Loading.style.top = (parseInt((window.document.documentElement.clientHeight - 24)/2) + qp_shared.getDocumentScrollTop()) + "px";

            document.body.appendChild(this.Loading);
        };

        if (el("sysdiv_loginFrame") == null) {
            this.DivFrame = document.createElement("DIV");
            this.DivFrame.id = "sysdiv_loginFrame";
            this.DivFrame.style.cssText = "z-index: 99999; position: absolute; left: 0px; top: 0px; display: none; width: 880px; height: 300px; background-color: #ffffff; border: solid 7px #ddd;";

            this.PageFrame = document.createElement("IFRAME");
            this.PageFrame.id = "sysifm_loginFrame";
            this.PageFrame.align = "middle";
            this.PageFrame.frameBorder = "0";
            this.PageFrame.scrolling = "auto";
            this.PageFrame.style.cssText = "z-index: 101; position: absolute; left: 0px; top: 0px";
            this.PageFrame.src = url;

            this.DivFrame.appendChild(this.PageFrame);
            document.body.appendChild(this.DivFrame);
        }
        else {
            this.PageFrame.src = url;
        }

        if (qp_shared.IsIE && this.PageFrame.readyState != "complete")
            this.PageFrame.onreadystatechange = function(e) { e = window.event || e; _this.onreadystatechange(e); };
        else if(!qp_shared.IsIE)
            this.PageFrame.onload = function(e) { e = window.event || e; _this.onreadystatechange(e); };
        else
            this.removeLoading();
    };

    this.RenderDiv=function(w,h,html){

        if (el("sysimg_wait") == null) {
            this.Loading = document.createElement("IMG");
            this.Loading.id = "sysdiv_wait";
            this.Loading.src = qp_shared.getURL("images/wait/reloading.gif");
            this.Loading.style.zIndex = 999999;
            this.Loading.style.position = "absolute";
            this.Loading.style.left = parseInt((window.document.documentElement.clientWidth - 24)/2) + "px";
            this.Loading.style.top = (parseInt((window.document.documentElement.clientHeight - 24)/2) + qp_shared.getDocumentScrollTop()) + "px";

            document.body.appendChild(this.Loading);
        };

        if (el("sysDiv_Dialog") == null) {

                this.Div_Dialog = document.createElement("DIV"); //創建div對象
                this.Div_Dialog.id = "sysDiv_Dialog";
                this.Div_Dialog.style.cssText = "z-index: 99999; position: absolute; left: 0px; top: 0px; display: none; width:"+w+"px; height: "+h+"px; background-color: #ffffff; border: solid 7px #ddd;";
           }

        document.body.appendChild(this.Div_Dialog); //加入Div對話框
        document.body.removeChild(this.Loading);//移除加載圖片

        //html為填充div的內容
        if(html!=null){
           this.Div_Dialog.innerHTML =html;
        }
    };

    //加載完成事件
    this.onreadystatechange = function(e) {
        if ((qp_shared.IsIE && this.PageFrame.readyState == "complete") || (!qp_shared.IsIE)) {
            //清空事件
            if (this.PageFrame.onreadystatechange != null)
                this.PageFrame.onreadystatechange = null;
            //清空事件
            if (this.PageFrame.onload != null)
                this.PageFrame.onload = null;

            this.removeLoading();
        }
    };

    //創建一個占位控件
    this.renderPlace = function(container) {
        var objContainer = el(container);
        if (objContainer != null) {
            var obj = document.createElement("DIV");
            obj.className = "placeEmpty";

            objContainer.appendChild(obj);
        }
    };

    //設置窗口大小
    this.setWindowSize = function(width, height) {
        this.PageFrame.width = this.DivFrame.style.width = width + "px";
        this.PageFrame.height = this.DivFrame.style.height = height + "px";

        this.DivFrame.style.left = (window.document.documentElement.clientWidth - width) / 2 + "px";
        this.DivFrame.style.top = ((window.document.documentElement.clientHeight- height) / 2 + qp_shared.getDocumentScrollTop()) + "px";

        this.DivFrame.style.display = "";
    };

    //設置Div窗口大小
    this.setDivWindowSize = function(width, height) {
        this.Div_Dialog.width =width + "px";
        this.Div_Dialog.height = height + "px";

        this.Div_Dialog.style.left = (window.document.documentElement.clientWidth - width) / 2 + "px";
        this.Div_Dialog.style.top = ((window.document.documentElement.clientHeight- height) / 2 + qp_shared.getDocumentScrollTop()) + "px";

        this.Div_Dialog.style.display = "";
    };

    //隱藏彈出窗口及遮蓋層
    this.hidden = function() {
        try {
            if (this.DivFrame != null) {
                document.body.removeChild(this.DivFrame);
            }
        }catch(e){};

        this.hiddLayer();
        this.removeLoading();
    };

    //只關掉彈出窗口,仍然顯示遮蓋層
    this.close = function() {
        try {
            if (this.DivFrame != null) {
                document.body.removeChild(this.DivFrame);
            }
        }catch(e){};
    };

    //關掉DIV彈出窗口
    this.closeDiv = function () {
        try {
            if (this.Div_Dialog != null) {
                document.body.removeChild(this.Div_Dialog);
                this.hiddLayer();
            }
        } catch (e) {};
    };

    //隱藏Loading
    this.removeLoading = function() {
        try {
            if (this.Loading != null) {
                //當前窗口
                var obj = document.getElementById("sysdiv_wait");
                if (obj != null) {
                    document.body.removeChild(obj);
                }

                //父窗口
                if (window.parent != null) {
                    obj = window.parent.document.getElementById("sysdiv_wait");
                    if (obj != null) {
                        window.parent.document.body.removeChild(obj);
                    }
                }
            }
        }catch(e){};
    };

    //顯示彈出窗口
    this.show = function(url, width, height, showPlace, cssName) {
        //顯示一個占位控件
        if (showPlace != null && showPlace != "") {
            this.renderPlace(showPlace);
        };

        //如果有自定css
        if (cssName != null) {
            this.CssName = cssName;
        };        

        //為了你防止緩存加了一個隨機數
        this.Render(qp_shared.getRandomUrl(url), width, height);

        this.showLayer();

        this.setWindowSize(width, height);
    };

    //彈出DIV
    this.showDivDialog = function (width, height, html) {

        this.showLayer();
        this.RenderDiv(width, height, html);
        this.setDivWindowSize(width, height);
    }

};

var oPopup = new Popup();

js彈出層或者js彈出引用url Frame 層

时间: 2024-08-04 10:18:24

js彈出層或者js彈出引用url Frame 層的相关文章

用JS实现加载页面前弹出模态框

主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(function () { $("#select").bind("change",function(){ if($(this).val()==0){ return; } else{ $("p").text($(this).val()); } }); }); //选择触发事件 func

JS通过设置cookie来控制弹出层,首次打开页面显示弹出层

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>JS通过设置cookie来控制弹出层,首次打开页面显示弹出层,刷新页面不再显示:关闭浏览器重新打开.清除缓存cookie显示.</title&

css+html+js实现多级下拉和弹出菜单

本文将使用css+html+js实现横向菜单.具有多级弹出菜单下拉. 首先我们来看看效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvajkwMzgyOTE4Mg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" > 首先应该写html部分的代码,代码比較简单,代码例如以下: <body> <div id="men

css+html+js实现下拉及多级弹出菜单

本文将使用css+html+js实现横向菜单,具有下拉的多级弹出菜单. 首先我们来看看效果图: 首先应该写html部分的代码,代码比较简单,代码如下: <body> <div id="menu"> <ul> <li><a href="#" id="current">首页</a></li> <li><a href="#">

弹出框 popover.js

弹出框 popover.js 为任意元素添加一小块浮层,就像 iPad 上一样,用于存放非主要信息. 弹出框的标题和内容的长度都是零的话将永远不会被显示出来. 插件依赖 弹出框依赖 工具提示插件 ,因此,如果你定制了 Bootstrap,一定要注意将依赖的插件编译进去. 初始化 由于性能的原因,工具提示和弹出框的 data 编程接口(data api)是必须要手动初始化的. 在一个页面上一次性初始化所有弹出框的方式是通过 data-toggle 属性选中他们: 复制 复制 $(function

BootStrap学习笔记JS插件(一)--模态弹出框

一.弹出框基础 <div class="modal show"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss=&quo

JS轻松实现单击文本框弹出选择日期

我的开发工具是vs2005,你们可选择自己合适的开发工具 首先创建个文本框<input id="txFDate" name="txFDate" type="text" value="" onfocus="setday(this)" runat="server"   /> 可以看到文本框有个onfocus触发事件,现在就贴上这个事件的代码(代码比较长,但是只需要复制所有代码把他

蓝鸥原生JS:js的引入方式及js的基本数据类型

蓝鸥原生JS:js的引入方式及js的基本数据类型 蓝鸥零基础学习HTML5-html+css基础 http://11824614.blog.51cto.com/11814614/1852769 js的引入方式 在一对 script 标签中引入js代码 通过这种方式引入,可以把js代码和html代码写在同一个文件中,但是注意:最好把js代码写在body之后,文档的加载顺序是从上到下加载的,先把页面内容渲染出来,再加入用户交互,这样用户体验会大大加强. 示例代码: <html lang="en

js day43 Jquery入门(回顾js,Jquery选择器,dom操作)

1     Javascript回顾 问题:Javascript能做什么? 1. 获取操作dom <style> .aa{ background:red} .bb{ background:blue} </style> <body> <div id="dv" title="提示信息" class="aa">AAAAAAAAA</div> <button onclick="f