zoukankan      html  css  js  c++  java
  • javascript模态窗口Demo

    不多介绍了,应该见很多了,见过很多网站用的是Jquery的插件,个人觉得不够灵活

    下面这个Demo支持回调,可以直接引用modalDialog.js使用,不存在任何Jquery的影子

    global.js

    代码
    window.js = new myJs();  //为了避免名称重复我们换个名称,附加一个myJs对像到window对象上,然后我们在页面中调用window.js

    //js对象
    function myJs() {
        
    this.x = 10;
    }
    //下面我们对myJs进行扩展
    myJs.prototype.alert = function (msg) { alert(msg); } //一个alert方法测试调用js.alert('弹出提示');
    //
    获取制定Id的dom对象
    myJs.prototype.$ = function (id) { return document.getElementById(id); }

    myJs.prototype.bodyWidth 
    = document.documentElement.clientWidth;
    myJs.prototype.bodyHeight 
    = document.documentElement.clientHeight;
    myJs.prototype.body 
    = document.body;

     modalDialog.js 文件代码如下:

    代码
    //Modaldialog
    function modalDialog() {
        
    this.uri ="about:blank";         //地址
        this.title = null;      //标题
        this.width = 400;       //默认宽
        this.height = 300;      //默认高
        this.borderColor = "black"//边框颜色
        this.borderWidth = 2;   //边框宽度
        this.callback = null;   //回调方法
        this.background = "black";
        
    this.titleBackground = "silver";
    }
    modalDialog.prototype.url 
    = this.uri;  //这样不用扩展也是可以的但是在页面中只能提示找不到这个属性
    modalDialog.prototype.title = this.title;
    modalDialog.prototype.width 
    = this.width;
    modalDialog.prototype.height 
    = this.height;
    modalDialog.prototype.background 
    = this.background;
    modalDialog.prototype.borderWidth 
    = this.borderWidth;
    modalDialog.prototype.borderColor 
    = this.borderColor;
    modalDialog.prototype.titleBackground 
    = this.titleBackground;
    modalDialog.prototype.callback 
    = this.callback;
    //触发回调方法
    modalDialog.prototype.call = function (callback) { if (callback != null) callback(this); if (this.callback != nullthis.callback(); }
    //显示
    modalDialog.prototype.show = function () {
        
    var js = window.js;
        
    //在里面实现显示的细节
        var x = js.bodyWidth, y = js.bodyHeight;
        
    //先创建一个层遮罩整个body
        var zdiv = "zdiv";      //遮罩层id
        document.body.innerHTML += "<div id='" + zdiv + "' style='" + x + "px;height:" + y + "px;background-color:" +
        
    this.background + ";position:absolute;top:0;left:0;" +
        
    "filter:alpha(opacity=80);opacity:0.8;z-index:'></div>";

        
    var mdiv = "mdiv";     //模态窗口层id
        document.body.innerHTML += "<div id='" + mdiv + "' style='" + this.width + "px;height:" + this.height + "px;" +
        
    "border:solid " + this.borderWidth + "px " + this.borderColor + ";z-index:20;position:absolute;top:" +
        (y 
    - this.height) / 2 + ";left:" + (x - this.width) / 2 + ";'>" +
        
    //加上标题
        (this.title != null ? "<div style='background:" + this.titleBackground + ";line-height:30px;padding:0 10px;100%'>" + this.title + "</div>" : ""+
        
    "<div style='padding:1px;'><iframe src='" + this.uri + "' frameborder='0' scrolling='no' style='" + (this.width) + "px;height:" +
        (
    this.title != null ? this.height - 30 : this.height) + "px;'></iframe></div></div>";
    }
    modalDialog.prototype.close 
    = function () {
        document.body.removeChild(window.js.$(
    "mdiv"));
        document.body.removeChild(window.js.$(
    "zdiv"));
    }

     default.html 页面上创建modalDialog

    代码
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
    <title>模态窗口Demo</title>
        
    <!--下面这个js文件为我们的公共js文件-->
        
    <script type="text/javascript" src="global.js"></script>
        
    <!--ModalDialog UI js文件-->
        
    <script type="text/javascript" src="modaldialog.js"></script>
        
    <script type="text/javascript">
            
    var md;  //用于页面回调
            var uri = "/test.html";
            
    function showModalDialog() {

                    
    //处理打开模态窗口
                    var m = new modalDialog();
                    m.uri 
    = uri;
                    m.title 
    = "模态窗口";
                    m.background 
    = "white";
                    m.borderColor 
    = "orange";
                    m.borderWidth 
    = 2;
                    m.titleBackground 
    = "gold";
                    m.callback 
    = function () { m.close(); }
                    
    // m.call();  这个回调方法在modalDialog的Uri中调用
                    m.show();

                    md 
    = m;
                }
        
    </script>
        
    </style>
    </head>
    <body>
        
    <div>
        用javascript+css实现ModalDialog
    <br />
        Jquery框架里面有个插件也可以实现这种效果,不过我们说的是自己实现
        
        
    <br />
        
    <input id="btopenDialog" type="button" value="打点模态窗口!" onclick="showModalDialog()" />
        
        
    </div>
    </body>
    </html>

    在modalDialog页面中使用window.parent.md.call()触发回调函数

    源代码:ModalDialogDemo.rar   [VS2010]

  • 相关阅读:
    FEniCS 1.1.0 发布,计算算术模型
    Piwik 1.10 发布,增加社交网站统计
    淘宝褚霸谈做技术的心态
    CyanogenMod 10.1 M1 发布
    Druid 发布 0.2.11 版本,数据库连接池
    GNU Gatekeeper 3.2 发布
    Phalcon 0.9.0 BETA版本发布,新增大量功能
    EUGene 2.6.1 发布,UML 模型操作工具
    CVSps 3.10 发布,CVS 资料库更改收集
    Opera 移动版将采用 WebKit 引擎
  • 原文地址:https://www.cnblogs.com/newmin/p/javascript_modalDialog.html
Copyright © 2011-2022 走看看