JS模拟Alert与Confirm对话框

这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:;

    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

//Confirm

var  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();

        }

    }

巴特西

JS模拟Alert与Confirm对话框

最新文章

热门文章