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">
          a:<input type="text">
          <br>
          b:<input type="text">
          <br>

          b:<input type="text">
          <br>
          b:<input type="text">
          <br>
          b:<input type="text">
          <br>
          <input type="submit">
      </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="zepto.min.js"></script>
<script src="popup.js"></script>
<link href="popup.css" rel="stylesheet" />

<script>
    $('#btn-aaa').click(function(){
        $('body').popup({
            title:'表单提交'
            ,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>

popup.js:

/*
弹出层组件
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);

popup.css

;;; }
.car-popup {;;; 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 {; -webkit-transform: scale(0); top: 50%; left: 50%; margin: 0px auto; }
.car-popup>header {;; 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; }

zepto弹出层组件的更多相关文章

  1. 一步步编写avalon组件01:弹出层组件

    avalon2已经稳定下来,是时候教大家如何使用组件这个高级功能了. 组件是我们实现叠积木开发的关键. avalon2实现一个组件非常轻松,并且如何操作这个组件也比以前的avalon2,还是react ...

  2. Layui 弹出层组件——layer的模块化开发实例应用

    Layui 弹出层组件——layer的模块化开发实例应用 1.首先在package.json中引入layer组件依赖 2.在源码中应用这个依赖 3.在源码中编写代码应用此组件 4.效果验证:点击日历上 ...

  3. 原生Js弹窗插件|web弹出层组件|对话框

    wcPop.js 是一款基于原生javascript开发的前端 web版 弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种 ...

  4. Layui 弹出层组件——layer

    layer是作为Layui[经典模块化前端框架]的一个弹层模块,由于其用户基数较大,所以把layer作为独立组件来维护. 基础参数: 基础参数主要指调用方法时用到的配置项,如:layer.open({ ...

  5. javascript对话框(弹出层)组件

    http://www.blueidea.com/download/product/2010/7513.asp#comment 1. 从头到尾对一遍<<Javascript高级程序设计> ...

  6. 微信小程序 - 弹出层组件

    需要的可以下载示例:maskalert

  7. Layer组件多个iframe弹出层打开与关闭及参数传递

    一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...

  8. html/css/js-layer弹出层的初次使用

    学习前端有时很多时候要用到弹出层,原生的js写有些麻烦,而且不美观,基于jQuery的弹出层组件layer应运而生,近些年来备受青睐.官网上有使用教程,但当初用的时候还是糊里糊涂,今天来记录一下lay ...

  9. 同学帮帮移动 H5 弹出层类组件:txbb-pop

    Txbb.Pop 同学帮帮弹出层类组件,简洁.无依赖,使用 CSS3 实现动画效果. 为什么要再造一遍轮子 弹出层是常见的业务场景,而且弹出层的业务场景很简单,没必要使用大而全的库,并且,我们经常会有 ...

随机推荐

  1. oracle11g RAC1执行脚本结果

    [root@testdb11a ~]# /u01/app/oraInventory/orainstRoot.sh Changing permissions of /u01/app/oraInvento ...

  2. CSS笔记1

    一. 列表 列表是有三种形式 1.1   无序列表 无序列表,用来表示一个列表语义,并且每个项目与项目之间是不分先后顺序的 ul 的英文unordered list "无序列表" ...

  3. ThinkPHP中的动态缓存(S方法)和快速缓存(F方法)

    系统默认的缓存方式是采用File方式缓存,我们可以在项目配置文件里面定义其他的缓存方式,例如,修改默认的缓存方式为Xcache(当然,你的环境需要支持Xcache)    对于File方式缓存下的缓存 ...

  4. javascript-抽象工厂模式

    抽象工厂模式笔记   1.抽象工厂模式创建多个抽象类,创建出的结果是一个类簇(这里是抽象类的集合)   2.抽象工厂中传入的父类是否是抽象工厂方法创建的抽象类进行判断,不是则抛出错误   3.子类通过 ...

  5. 【欧拉定理】计算(a^(b^c))%1000000007

    欧拉定理(称费马-欧拉定理或欧拉 函数定理) 欧拉定理表明,若n,a为正整数,且n,a互素(即gcd(a,n)=1),则 这个定理可以用来简化幂的模运算.比如计算7222的个位数,实际是求7222被1 ...

  6. “玲珑杯”郑州轻工业学院第八届ACM程序设计大赛暨河南高校邀请赛-正式赛(总结)

    这次轻院校赛,我们去了五个队,怀着打酱油的心态早早爬起来坐上校车出发了,由于昨晚室友打游戏,以及看视频大笑...没睡好,快1点才睡着,感觉特别困,车上没地方,睡不着,就在车上闭目养神,由于在新校区,不 ...

  7. 2014年度辛星全然解读html第七节

    经过前面六节的学习,我们大致清楚了HTML教程中的基础内容,那么接下来我们開始继续向后推进,能够说,以下我们介绍一下HTML中的区块. ***************区块*************** ...

  8. hdu - 4979 - A simple math problem.(可反复覆盖DLX + 打表)

    题意:一种彩票共同拥有 N 个号码,每注包括 M 个号码,假设开出来的 M 个号码中与自己买的注有 R 个以上的同样号码,则中二等奖,问要保证中二等奖至少要买多少注(1<=R<=M< ...

  9. 建立Ftp站点

    建立Ftp站点步骤: 1.首先创建一个用户 我的电脑右键->管理->本地用户和组->用户->“右键”新建用户->输入用户名和密码再点创建就行了! 2.其次是在C盘新建文件 ...

  10. xshell安装运行时提示缺少mfc110.dll

    下载最新的mfc110.dll文件 https://pan.baidu.com/share/link?shareid=1932421734&uk=1784696518&app=zd 之 ...