JavaScript自定义事件介绍(2)

这样在点击button的时候就可以弹出Dialog，点击关闭按钮的时候隐藏Dialog，看起来不错实现了需求，但总感觉缺点儿什么，一般Dialog显示的时候页面还会弹出一层灰蒙蒙半透明的罩子，阻止页面其它地方的点击，Dialog隐藏的时候罩子去掉，页面又能够操作。加些代码添个罩子。

在body顶部添加一个pagecover

<div></div>

为其添加style

复制代码 代码如下:

.pageCover
            {
                width:100%;
                height:100%;
                position:absolute;
                z-index:10;
                background-color:#666;
                opacity:0.5;
                display:none;
            }

为了打开的时候显示page cover，需要修改openDialog方法

复制代码 代码如下:

function openDialog(){
            var dlg=new Dialog('dlgTest');
            document.getElementById('pageCover').style.display='block';
            dlg.show();
        }

效果很不错的样子，灰蒙蒙半透明的罩子在Dialog弹出后遮盖住了页面上的按钮，Dialog在其之上，这时候问题来了，关闭Dialog的时候page cover仍在，没有代码其隐藏它，看看打开的时候怎么显示的page cover，关闭的时候怎么隐藏行了! 还真不行，打开的代码是页面button按钮的事件处理程序自己定义的，在里面添加显示page cover的方法合情合理，但是关闭Dialog的方法是Dialog控件（虽然很简陋，远远算不上是控件）自己的逻辑，和页面无关，那修改Dialog的close方法可以吗？也不行！有两个原因，首先Dialog在定义的时候并不知道page cover的存在，这两个控件之间没有什么耦合关系，如果把隐藏page cover逻辑写在Dialog的close方法内，那么dialog是依赖于page cover的，也就是说页面上如果没有page cover，dialog就会出错。而且Dialog在定义的时候，也不知道特定页面的page cover id，没有办法知道隐藏哪个div，是不是在构造Dialog时把page cover id传入就可以了呢? 这样两个控件不再有依赖关系，也能够通过id查找到page cover DIV了，但是如果用户有的页面需要弹出page cover，有的不需要怎么办？

这是就事件大显身手的时候了，修改一下dialog 对象和openDialog方法

复制代码 代码如下:

function Dialog(id){
            this.id=id;
            this.close_handler=null;
            var that=this;
            document.getElementById(id).children[0].onclick=function(){
                that.close();
                if(typeof that.close_handler=='function')
                {
                    that.close_handler();
                }
            }
        }

复制代码 代码如下: