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-pop-mask { display: block; width: 100%; height: 100%; background: #000; z-index:; position: absolute; position: fixed; top:; left:; }

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

.car-popup>header { font-size: 16px; margin:; padding:; 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. easyDialog 简单、实用的弹出层组件

    easyDialog 简单.实用的弹出层组件 使用背景 在完成导师需求时,导师要求寻找比一个layer弹出层组件体积小得多的.最好能嵌入在进HTML代码中而非src引用的弹出层组件,在这个需求下,我找 ...

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

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

  5. Layui 弹出层组件——layer

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

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

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

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

    需要的可以下载示例:maskalert

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

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

  9. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

随机推荐

  1. 俄罗斯方块C#版

    using System; using System.Windows.Forms; using System.Drawing; using System.Media; class me : Form ...

  2. vsftp简单学习思考

    FTP的全称是File Transfer Protocol(文件传输协议),就是专门用来传输文件的协议.它工作在OSI模型的第七层,即是应用层,使用TCP传输而不是UDP这样FTP客户端和服务器建立连 ...

  3. Android 轮换控件

    首先是控件轮换 一.创建主布局 1.用到的控件是 TextSwitcher (文本轮换) 那么其他对应的也就是 ImageSwitcher (图片轮换) <LinearLayout xmlns: ...

  4. AndroidStudio开发环境配置-Windows

    Android Studio开发环境配置-Windows 最近突发奇想,开始研究Android开发.开始时使用Eclipse作为开发IDE,结果各种不好使,首先下载和安装SDK,以及不同版本的Imag ...

  5. 用hibernate tools生成对应的sql应用代码

    参考资料: eclipse在线配置hibernate tools http://jingyan.baidu.com/article/db55b609959d154ba20a2f5d.html [图]H ...

  6. CodeForces 261B Maxim and Restaurant 解法汇总

    题意:给定n个数a1-an(n<=50,ai<=50),随机打乱后,记Si=a1+a2+a3-+ai,问满足Si<=p的i的最大值的期望.(p<=50) 这道题在网上有一些不同 ...

  7. BZOJ4700: 适者

    先排序,枚举删一个点,在前面找出最优的另一个点,容易推出斜率方程,平衡树维护凸包. #include<bits/stdc++.h> using namespace std; typedef ...

  8. 网站设置404页面 --nginx

    有的时候根据域名要先知道用的什么web 服务器 最简单的 http://tool.chinaz.com/pagestatus/  输入域名,看返回的头部信息 用的那个web浏览器 下面的方法也是根据头 ...

  9. php 时间戳与日期的转换（转载）

    UNIX时间戳和格式化日期是我们常打交道的两个时间表示形式. a:Unix时间戳存储.处理方便,但是不直观 b:格式化日期直观,但是处理起来不如Unix时间戳那么自如 [关于两者的互相转换] 日  期 ...

  10. 03 Yarn 原理介绍

    Yarn 原理介绍 大纲: Hadoop 架构介绍 YARN 产生的背景 YARN 基础架构及原理   Hadoop的1.X架构的介绍   在1.x中的NameNodes只可能有一个,虽然可以通过Se ...