自定义弹出框基于zepto 记得引入zepto

html

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">


<body>
<h1>弹出层DEMO</h1>
    <a href="#" id="btn-aaa">打开一个表单</a>
    <a href="#" id="btn-bbb">普通提示</a>
    <a href="#" id="btn-ccc">选择确认框</a>
    <br><br>
    <div>
      用于演示用的表单，实际中会将容器隐藏
      <form id="form-1">
          <input type="text" placeholder="添加标签">
      </form>
    </div>
//此处为弹出框的样式

<!--调用说明-->
<pre>
//依赖文件
zepto.js

//默认值配置
var defaults = {
    id:'',
    formId:null,
    title:"提示",
    message:"",
    cnacel:"取消",
    onCancel: function(){},
    ok:"确认",
    onOk: function(){},
    cancelOnly:false,
    okClass:'button',
    cancelClass:'button',
    onShow:function(){},
    onHide:function(){},
    closeOnOk:true,
    hideTitle:false,
    //重写样式
    popClass:''
};

//调用示例：
//默认容器都是body
$('body').popup({
    title:'表单提交'
    ,id:'pop-1'
    ,formId:'form-1'
    ,closeOnOk:false
    ,ok:'提交'
    ,onOk:function(){
        $('#form-1').submit();
    }
});
</pre>
<script src="../../script/zepto.js"></script>
<script src="car-popup.js"></script>
<link href="car-popup.css" rel="stylesheet" />

<script>
    $('#btn-aaa').click(function(){
        $('body').popup({
            title:'填写标签名称，最长10个汉字'
            ,id:'pop-1'
            ,formId:'form-1'
            ,closeOnOk:false
            ,ok:'确定'
            ,onOk:function(){
                $('#form-1').submit();
            }
        });
        return false;
    });

    $('#btn-bbb').click(function(){
        $('body').popup('这是普通提示');
        return false;
    });

    $('#btn-ccc').click(function(){
        $('body').popup({
            title:'提示'
            ,message:'您是否要退出'
            ,id:'pop-2'
            ,onOk:function(){
                alert('OK');
            }
        });
        return false;
    });

    $('#form-1').bind('submit',function(){
        alert('表单form-1提交');
        return false;
    });

</script>
</body>
</html>

css部分

#car-pop-mask{
    display:block;
    width:100%;
    height:100%;
    background:#000;
    z-index: 999999;
    position:absolute;
    position:fixed;
    top:0;
    left:0;
}


.car-popup {
    display: block;
    width: 300px;
    padding: 0;
    opacity: 1;
    -webkit-transform: scale(1);
    -webkit-transition: all  0.20s  ease-in-out;
    transform:scale(1);
    transition: all 0.20s  ease-in-out;
    position: absolute;
    z-index: 1000000;
    top: 50%;
    left: 50%;
    margin: 0px auto;
    background: #fff;
    color:#555;
    box-shadow:1px 1px 1px #777;
    -webkit-box-shadow:1px 1px 1px #777;
}
.car-popup >* {
color:inherit;
}
.car-popup a{text-decoration: none;}

.car-popup.hidden {
    opacity: 0;
    -webkit-transform: scale(0);
    top: 50%;
    left: 50%;
    margin: 0px auto;
}

.car-popup>header{

    font-size:16px;
    margin:0;
    padding:0;
    background: #eee;
    color: #888;
    height: 30px;line-height: 30px;text-indent: 10px;
}

.car-popup>div{
    font-size:14px;
    margin:15px 10px;
    line-height: 1.8;
}

.car-popup>footer{
    width:100%;
    text-align:center;
    display:block !important;
}

.car-popup .car-popup-cancel,.car-popup .car-popup-ok{
    float:left;
    width: 50%;
    background: #EAEAEA;
    color:#555;
    height: 30px;line-height: 30px;
}

.car-popup .car-popup-ok{
    float:right;
    background: #41B1B2;
    color: #fff;
}

.car-popup a.center{
    float:none!important;
    width:100%;
    margin:auto;
    display: block;
}

js部分

/* 
弹出层组件
@jslover 20140817
DEMO
 $('body').popup({
   title:'提示',
   formId:'form1',
   id:'pop-1'
 });
 手动关闭
 $("#pop-1").trigger("close");
 */
(function ($) {
    //队列
    var queue = [];
    //默认值配置
    var defaults = {
        id:'',
        formId:null,
        title:"提示",
        message:"",
        cnacel:"取消",
        onCancel: function(){},
        ok:"确认",
        onOk: function(){},
        cancelOnly:false,
        okClass:'button',
        cancelClass:'button',
        onShow:function(){},
        onHide:function(){},
        closeOnOk:true,
        hideTitle:false,
        //重写样式
        popClass:''
    };
    //弹出层类
    var Popup = (function () {
        var Popup = function (containerEl, opts) {
            this.container = containerEl;
            if (!this.container) {
                this.container = document.body;
            }
            try {
                if (typeof (opts) === "string" || typeof (opts) === "number"){
                    opts = {
                        message: opts,
                        cancelOnly: "true",
                        cnacel: "关闭",
                        hideTitle:true
                    };
                }
                var _this = this;
                var opts = $.extend({},defaults,opts);
                if(!opts.title){
                    opts.hideTitle = true;
                }
                if(!opts.id){
                    opts.id='popup-' + Math.floor(Math.random()*1000);
                }
                for(var k in opts){
                    _this[k] = opts[k];
                }
                queue.push(this);
                if (queue.length == 1){
                    this.show();
                }
            } catch (e) {
                console.log("配置错误：" + e);
            }

        };

        Popup.prototype = {

            show: function () {
                var _this = this;
                var markup = '<div id="' + this.id + '" class="car-popup hidden '+ this.popClass + '">';
                if(!_this.hideTitle){
                    markup += '<header>' + this.title + '</header>';
                }
                markup +='<div class="content-body">' + this.message + '</div>'+
                         '<footer style="clear:both;">'+
                             '<a href="javascript:;" class="car-popup-cancel ' + this.cancelClass + '">' + this.cnacel + '</a>'+
                             '<a href="javascript:;" class="car-popup-ok ' + this.okClass + '"  >' + this.ok + '</a>'+
                        ' </footer>'+
                     '</div></div>';
                $(this.container).append($(markup));
                //添加外部表单
                if(this.formId){
                    var $content =  $(this.container).find('.content-body');
                    var $form = $('#'+this.formId);
                    this.$formParent = $form.parent();
                    $form.appendTo($content);
                }

                var $wrap = $("#" + this.id);
                $wrap.bind("close", function () {
                    _this.hide();
                });

                if (this.cancelOnly) {
                    $wrap.find('.car-popup-ok').hide();
                    $wrap.find('.car-popup-cancel').addClass('center');
                }
                $wrap.find('A').each(function () {
                    var button = $(this);
                    button.bind('click', function (e) {
                        if (button.hasClass('car-popup-cancel')) {
                            _this.onCancel.call(_this.onCancel, _this);
                            _this.hide();
                        } else if(button.hasClass('car-popup-ok')){
                            _this.onOk.call(_this.onOk, _this);
                            if (_this.closeOnOk)
                                _this.hide();
                        }
                        e.preventDefault();
                    });
                });
                _this.positionPopup();
                Mask.show(0.3);
                $wrap.bind("orientationchange", function () {
                    _this.positionPopup();
                });

                //force header/footer showing to fix CSS style bugs
                $wrap.find("header").show();
                $wrap.find("footer").show();
                setTimeout(function(){
                    $wrap.removeClass('hidden');
                    _this.onShow(_this);
                },50);
            },

            hide: function () {
                var _this = this;
                $('#' + _this.id).addClass('hidden');
                Mask.hide();
                if(!$.os.ie&&!$.os.android){
                    setTimeout(function () {
                        _this.remove();
                    }, 250);
                } else{
                    _this.remove();
                }
            },

            remove: function () {
                var _this = this;
                if(_this.onHide){
                    _this.onHide.call();
                }
                var $wrap = $("#" + _this.id);
                if(_this.formId){

                    var $form = $('#'+_this.formId);
                    $form.appendTo(_this.$formParent);
                }

                $wrap.unbind("close");
                $wrap.find('.car-popup-ok').unbind('click');
                $wrap.find('.car-popup-cancel').unbind('click');
                $wrap.unbind("orientationchange").remove();
                queue.splice(0, 1);
                if (queue.length > 0)
                    queue[0].show();
            },
            positionPopup: function () {
                var $wrap = $('#' + this.id);
                var w0 = $(window).width()||360
                    ,h0 = $(window).height()||500
                    ,w1 = $wrap[0].clientWidth||300
                    ,h1 = $wrap[0].clientHeight||100;

                $wrap.css("top", ((h0 / 2.5) + window.pageYOffset) - (h1 / 2) + "px")
                     .css("left", (w0 / 2) - (w1 / 2) + "px");
            }
        };
        return Popup;
    })();
    //遮罩类-单例
    var Mask = {
        isShow : false
        ,show:function(opacity){
            if (this.isShow){
                return;
            }
            opacity = opacity ? " style='opacity:" + opacity + ";'" : "";
            $('body').prepend($("<div id='car-pop-mask'" + opacity + "></div>"));
            $('#car-pop-mask').bind("touchstart", function (e) {
                e.preventDefault();
            }).bind("touchmove", function (e) {
                e.preventDefault();
            });
            this.isShow = true;
        }
        ,hide:function(){
            this.isShow = false;
            $('#car-pop-mask').unbind("touchstart")
                .unbind("touchmove")
                .remove();
        }
    };

    //注册到对象
    $.fn.popup = function (opts) {
        return new Popup(this[0], opts);
    };
})(Zepto);
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yanaweb/p/5085332.html