手把手教你书写对话框（构造函数&原型模式）

      分享点代码，班门弄斧下，希望刚入门前端的可以少走点弯路。

      该对话框是适合于手机端&pc端，基于微信weui修改而成。

      废话少说，先看效果，贴代码吧。

      

     这是alert效果图，其实其他都是一样的。

      开始贴代码

      dialog.js部分

window.DialogBox=(function(){
 //三部曲
    //构造函数
    var WindowAlert=function(){
        this.cfg={
            content:"",
            btnCancle:null,
            btnSure:null,
            title:'温馨提示',
            sure:'我知道了',
            type:'text',
            cancle:'取消',
            template:''
        }
    }
    //定义方法
    WindowAlert.prototype={

        alert:function(cfg){
            var CFG=$.extend(this.cfg,cfg);            
            var boundingBox=$('<div class="weui_dialog_alert">'
            +'<div class="weui_mask"></div>'
            +'<div class="weui_dialog">'
            +'<div class="weui_dialog_hd"><strong class="weui_dialog_title">'
            +CFG.title
            +'</strong></div>'
            +'<div class="weui_dialog_bd">'
            +CFG.content
            +'</div>'
            +'<div class="weui_dialog_ft">'
            +'<a href="javascript:;" class="weui_btn_dialog primary" id="alert_sure">'
            +CFG.sure
            +'</a></div></div></div>');
            boundingBox.appendTo('body');
            btnSure=boundingBox.find('#alert_sure')
            btnSure.click(function(){
                CFG.btnSure&&CFG.btnSure();
                boundingBox.remove();
            })
        },
        confirm:function(cfg){
            var CFG=$.extend(this.cfg,cfg);            
            var boundingBox=$('<div class="weui_dialog_confirm">'
            +'<div class="weui_mask"></div>'
            +'<div class="weui_dialog">'
            +'<div class="weui_dialog_hd"><strong class="weui_dialog_title">'
            +CFG.title
            +'</strong></div>'
            +'<div class="weui_dialog_bd">'
            +CFG.content
            +'</div>'
            +'<div class="weui_dialog_ft">'
            +'<a href="javascript:;" class="weui_btn_dialog default" id="confirm_cancle">'
            +CFG.cancle
            +'</a>'
            +'<a href="javascript:;" class="weui_btn_dialog primary" id="confirm_sure">'
            +CFG.sure
            +'</a></div></div></div>');
            boundingBox.appendTo('body');
            btnSure=boundingBox.find('#confirm_sure')
            btnCancle=boundingBox.find('#confirm_cancle')

            btnSure.click(function(){
                CFG.btnSure&&CFG.btnSure();
                boundingBox.remove();
            })
             btnCancle.click(function(){
                CFG.btnCancle&&CFG.btnCancle();
                boundingBox.remove();
            })
        },
        prompt:function(cfg){
            var CFG=$.extend(this.cfg,cfg);            
            var boundingBox=$('<div class="weui_dialog_confirm">'
            +'<div class="weui_mask"></div>'
            +'<div class="weui_dialog">'
            +'<div class="weui_dialog_hd"><strong class="weui_dialog_title">'
            +CFG.title
            +'</strong></div>'
            +'<div class="weui_dialog_bd">'
            +'<form>'
            +'<input class="form-control" id="input-value" type="'
            +CFG.type
            +'"></form>'
            +'</div>'
            +'<div class="weui_dialog_ft">'
            +'<a href="javascript:;" class="weui_btn_dialog default" id="prompt_cancle">'
            +CFG.cancle
            +'</a>'
            +'<a href="javascript:;" class="weui_btn_dialog primary" id="prompt_sure">'
            +CFG.sure
            +'</a></div></div></div>');
            boundingBox.appendTo('body');
            btnSure=boundingBox.find('#prompt_sure')
            btnCancle=boundingBox.find('#prompt_cancle')
            btnSure.click(function(){
                CFG.btnSure&&CFG.btnSure();
                boundingBox.remove();
            })
             btnCancle.click(function(){
                CFG.btnCancle&&CFG.btnCancle();
                boundingBox.remove();
            })
        }
    }    
    return WindowAlert;
})()

public.js

window.PublicFunc=(function(){
    var PublicFunc=function(){
      
    }

    PublicFunc.prototype={
/** 
* 弹出对话框 
*/            
alert:function(o) {
    var o = o || {};
    /*初始化变量*/
    var content = o.content || '内容为空',
        title = o.title || '温馨提示',
        success = o.success || function(){},
        sure = o.sure || '我知道了';
    var alertResult = G_DialogBox.alert({
        content: content,
        title: title,
        sure: sure,
        btnSure: function() {
            success(true);
        }
    })

},
/** 
* 弹出确认对话框 
*/    
confirm:function(o) {
    var o = o || {};
    /*初始化变量*/
    var content = o.content || '内容为空',
        title = o.title || '温馨提示',
        sure = o.sure || '我知道了',
        cancle = o.cancle || '取消',
        success = o.success || function(){};
    G_DialogBox.confirm({
        content: content,
        title: title,
        sure: sure,
        cancle: cancle,
        btnSure: function() {
            success(true);
        },
        btnCancle: function() {
            success(false);
        },
    });
},
/** 
* 弹出文本对话框 
*/    
 prompt:function(o) {
    var o = o || {};
    /*初始化变量*/
    var content = o.content || '',
        title = o.title || '温馨提示',
        sure = o.sure || '我知道了',
        type = o.type || 'text',
        cancle = o.cancle || '取消',
        success = o.success || function(){};
    G_DialogBox.prompt({
        content: content,
        title: title,
        sure: sure,
        cancle: cancle,
        type:type,
        btnSure: function() {
            var data = $('#input-value').val();
            o.success(true, data);
        },
        btnCancle: function() {
            o.success(false, '');
        },
    });
}
    }
    return PublicFunc;
})()

html部分

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>

        <button id="alert">
            alert
        </button>
        <button id="confirm">
            confirm
        </button>
        <button id="prompt">
            prompt
        </button>
        <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>        
        <script type="text/javascript">
            var G_DialogBox = new DialogBox(); //初始化对话框
            var G_publicFunc = new PublicFunc(); //从这里调用

            //调用alert 传递一个对象
            $('#alert').bind('click',function(){
                    G_publicFunc.alert({
                title: '这是标题',
                content: '这是内容',
                sure: '我知道了'
            });
            })
            //调用confirm 传递一个对象
            $('#confirm').bind('click',function(){
                    G_publicFunc.confirm({
                title: '这是标题',
                content: '这是内容',
                sure: '确定',
                cancle: '取消'
            });
            })
            //调用prompt 传递一个对象
            $('#prompt').bind('click',function(){
                    G_publicFunc.prompt({
                title: '这是标题',
                type: 'text',
                sure: '确定',
                cancle: '取消'
            });
            })        
        </script>
    </body>

</html>

css部分

.weui_dialog {
  position: fixed;
  z-index: 5000;
  width: 85%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  background-color: #fafafc;
  text-align: center;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  overflow: hidden;
}
.weui_dialog_confirm .weui_dialog .weui_dialog_hd {
  padding: 1.2em 20px .5em;
}
.weui_dialog_confirm .weui_dialog .weui_dialog_bd {
  text-align: left;
}
.weui_dialog_hd {
  padding: 1.2em 0 .5em;
}
.weui_dialog_title {
  font-weight: 400;
  font-size: 17px;
}
.weui_dialog_bd {
  padding: 0 20px;
  font-size: 15px;
  color: #888888;
  word-wrap: break-word;
  word-break: break-all;
  /*输入框*/
}
.weui_dialog_bd .form-control {
  display: block;
  width: 100%;
  height: 28px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.weui_dialog_ft {
  position: relative;
  line-height: 42px;
  margin-top: 20px;
  font-size: 17px;
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
}
.weui_dialog_ft a {
  display: block;
  flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  color: #3cc51f;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.weui_dialog_ft a:active {
  background-color: #eeeeee;
}
.weui_dialog_ft:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  border-top: 1px solid #d5d5d6;
  color: #d5d5d6;
  transform-origin: 0 0;
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
}
.weui_dialog_confirm .weui_dialog_ft a {
  position: relative;
}
.weui_dialog_confirm .weui_dialog_ft a:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  border-left: 1px solid #d5d5d6;
  color: #d5d5d6;
  transform-origin: 0 0;
  transform: scaleX(0.5);
  -webkit-transform-origin: 0 0;
  -webkit-transform: scaleX(0.5);
}
.weui_dialog_confirm .weui_dialog_ft a:first-child:after {
  display: none;
}
.weui_btn_dialog.default {
  color: #353535;
}
.weui_btn_dialog.primary {
  color: #0BB20C;
}
@media screen and (min- 1024px) {
  .weui_dialog {
    width: 35%;
  }
}

代码完毕。

核心部分是js部分，css可以修改。

后续的大家自己去创新啦。

你们的点赞是我分享的动力，所以如果你开心，那就动动小手点个赞吧~~