JS模拟alert与confrim 对话框

 这2个例子都是用原生JS写的，主要是用JS拼接了界面，并未做过多的事件监听。，样式用了Css3的一些特性。

  调用方式则为：

 //Alert Alert.show('我警告你哦~'); //Confirm Confirm.show('我是确认对话框',function(){      doSomething(); });

 

 组件详情看下面的具体代码：

1.CSS样式

  由于这2个组件的样式差不多，所用共用了一样的css，样式代码如下：

/** *     dialog */.dialog {        top:40%;    left:40%;    width: 250px;    min-height: 100px;    position:fixed;    z-index:9999;    text-align: center;    padding:10px;    border:solid #bcc5c1 1px;    background:#FFF;        border-radius:3px;    -moz-border-radius:3px;    -webkit-border-radius:3px;    padding:0px;    behavior: url(PIE.htc);}.dialog .dialog-header {    position:relative;    width:100%;    height:30px;    margin:0px;    background:#0CF;    background:linear-gradient(top,#d1d4d3 0%,#c4c7c8 100%);    background:-webkit-linear-gradient(top,#d1d4d3 0%,#c4c7c8 100%);    background:-moz-linear-gradient(top,#d1d4d3 0%,#c4c7c8 100%);    border-radius:3px 3px 0px 0px;    -moz-border-radius:3px 3px 0px 0px;    -webkit-border-radius:3px 3px 0px 0px;    behavior: url(PIE.htc);}.dialog-header .header-left {    width: auto;    height:auto;    float:left;    margin:7px;}.dialog-header .header-right {    width: auto;    height:auto;    float:right;    margin:7px;}.dialog .dialog-content {    font-size:14px;        height:100%;    width:96%;    float:left;    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;    color:#424242;    padding:5px;}.dialog-content .content-main {    width: 100%;    min-height: 40px;    line-height:25px;    float:left;    white-space: normal;}.dialog-content .content-btn {    float:left;    width:100%;    height:28px;    margin-top:10px;}.btn {    font-family:Arial, Helvetica, sans-serif;    font-size:12px;    text-align:center;    vertical-align:middle;    margin-right:5px;    padding:5px 20px 5px 20px;    text-decoration:none;    border:#c4c7c8 solid 1px;    border-radius:3px;    background:#d1d4d3;    background:linear-gradient(top,#d1d4d3 0%,#c4c7c8 100%);    background:-webkit-linear-gradient(top,#d1d4d3 0%,#c4c7c8 100%);    background:-moz-linear-gradient(top,#d1d4d3 0%,#c4c7c8 100%);    color:#111c24;}.btn:hover {    background:#d1d4d3;    background:linear-gradient(top,#c4c7c8 0%,#d1d4d3 100%);    background:-webkit-linear-gradient(top,#c4c7c8 0%,#d1d4d3 100%);    background:-moz-linear-gradient(top,#c4c7c8 0%,#d1d4d3 100%);    color:#111c24;}.alert-content {    text-align: left;    text-indent: 20px;}.alert {    margin-left:140px;}

2.Alert

  Alert 主要是模拟了界面，并显示提示信息。JS代码.Demo 可查看：http://wewoor.github.io/CNUI/document.html 。

//Alert var Alert = {                func : function(){},        name : "dialog",        show : function(msg){        //show function            var confirm = document.createElement("div");                confirm.className = this.name;                confirm.id = this.name;;            var confirmHeader = document.createElement("div");                confirmHeader.className = "dialog-header";                    var headerSpan = document.createElement("span");                headerSpan.className = "dialog-title";                var confirmContent = document.createElement("div");                confirmContent.className = "dialog-content";                            var contentSpan = document.createElement("span");                contentSpan.className = "content-main alert-content";                        var contentBtnDiv = document.createElement("div");                contentBtnDiv.className="content-btn";                        var btnConfirm = document.createElement("a");    //确认按钮                btnConfirm.href = "javascript:Alert.hide()";                    btnConfirm.className = "btn alert";                                    //按钮添加            contentBtnDiv.appendChild(btnConfirm);                                    confirmContent.appendChild(contentSpan);            confirmContent.appendChild(contentBtnDiv);                            confirmHeader.appendChild(headerSpan);                        confirm.appendChild(confirmHeader);            confirm.appendChild(confirmContent);                        //default button            headerSpan.innerHTML = "警示框！";                btnConfirm.innerHTML = "确认";                contentSpan.innerHTML = "这是一个警示框！";            if(msg != null && msg != undefined){                contentSpan.innerHTML = msg;            }            document.body.appendChild(confirm);                        return confirm;        },        hide : function(){            var confirm = document.getElementById(this.name);            if(confirm != null && confirm != undefined){                document.body.removeChild(confirm);            }        }    }

 

3.Confirm 组件

  confirm对话框并没有像原生的confirm组件返回true 或者false，而是点击确认按钮后执行了传入的回调函数，点击取消按钮则移除了这个组件。demo请看：http://wewoor.github.io/CNUI/document.html

//Confirmvar  Confirm = {        func : function(){},        name : "dialog",            show : function(msg,call){        //show function            var confirm = document.createElement("div");                confirm.className = this.name;                confirm.id = this.name;;            var confirmHeader = document.createElement("div");                confirmHeader.className = "dialog-header";                    var headerSpan = document.createElement("span");                headerSpan.className = "dialog-title";                var confirmContent = document.createElement("div");                confirmContent.className = "dialog-content";                            var contentSpan = document.createElement("span");                contentSpan.className = "content-main";                        var contentBtnDiv = document.createElement("div");                contentBtnDiv.className="content-btn";                        var btnConfirm = document.createElement("a");    //确认按钮                btnConfirm.href = "javascript:Confirm.callback()";                    btnConfirm.className = "btn";            var btnCancle = document.createElement("a");    //取消按钮                btnCancle.className = "btn";                btnCancle.href = "javascript:Confirm.hide()";                                    //按钮添加            contentBtnDiv.appendChild(btnConfirm);            contentBtnDiv.appendChild(btnCancle);                        confirmContent.appendChild(contentSpan);            confirmContent.appendChild(contentBtnDiv);                            confirmHeader.appendChild(headerSpan);                        confirm.appendChild(confirmHeader);            confirm.appendChild(confirmContent);                        //default style             headerSpan.innerHTML = "对话框";                contentSpan.innerHTML = "这是确认对话框？";            btnConfirm.innerHTML = "确认";                btnCancle.innerHTML = "取消";                //if the property html is not null and not undefined             //just set this property.            if(msg != undefined){                contentSpan.innerHTML = msg;                                }                        //set callback            if(call != null && call != undefined){                                    if(typeof(call) == "function"){                                        this.func = call;                }                        }                                document.body.appendChild(confirm);                        return confirm;        },        hide : function(){            var confirm = document.getElementById(this.name);            if(confirm != null && confirm != undefined){                document.body.removeChild(confirm);            }        },        callback : function(){            //执行call回调方法            this.func();            //隐藏confirm对象            this.hide();        }    }