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. Layer组件多个iframe弹出层打开与关闭及参数传递

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

  3. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  4. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  5. 弹出层layer的使用

    弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...

  6. React native 的弹出层(输入)效果

    /*弹出层测试*/ import React,{Component} from 'react'; import { StyleSheet, View, Image, Text, TouchableOp ...

  7. yii弹出层

    Yii弹出层,包装了JQuery的JDialog,使用很方便.Yii组件功能太强大,强大到无法自拔 $this->beginWidget('zii.widgets.jui.CJuiDialog' ...

  8. layer弹出层框架alert与msg详解

    ayer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer ...

  9. 利用React/anu编写一个弹出层

    本文将一步步介绍如何使用React或anu创建 一个弹出层. React时代,代码都是要经过编译的,我们很多时间都耗在babel与webpack上.因此本文也介绍如何玩webpack与babel. 我 ...

随机推荐

  1. visual studio code更新

    早上起来正在看go语言,vsc提示有更新,之后安装,重启之后显示中文菜单,显然vsc支持本地化了. 查看发行说明:https://code.visualstudio.com/updates#vscod ...

  2. 给定n,a求最大的k,使n!可以被a^k整除但不能被a^(k+1)整除。

    题目描述: 给定n,a求最大的k,使n!可以被a^k整除但不能被a^(k+1)整除. 输入: 两个整数n(2<=n<=1000),a(2<=a<=1000) 输出: 一个整数. ...

  3. MVC中的数据注解和验证

    数据注解和验证 用户输入验证在客户端浏览器中需要执行验证逻辑. 在客户端也需要执行. 注解是一种通用机制, 可以用来向框架注入元数据, 同时, 框架不只驱动元数据的验证, 还可以在生成显示和编辑模型的 ...

  4. Window服务安装方式汇总

    一.制作bat文件 1)Install.bat: @echo 安装服务 %SystemRoot%\Microsoft.NET\Framework\v2.0.50727\installutil AppS ...

  5. oracle 学习笔记2

    1.oracle 中rowid和rownum的区别 oracle 数据库中,每一行都有一个唯一行的标识符,ROWID,数据库内部用来存储行的物理位置.ROWID是一个18位数字,采用base-64编码 ...

  6. java获取系统信息

    public class SystemInfo { public static void main(String[] args) { //系统属性 Properties prop = System.g ...

  7. css常用中文字体的英文名称写法

    我们知道网页中使用中文字体最好用其对应的英文名称,这样可以避免出现编码问题导致样式中的中文名称出现乱码,从而不识别.下面是网页中常用的中文字体所对应的英文名称.留着,不用翻资料了 中文 英文 宋体 S ...

  8. Enabling CORS in WCF

    Introduction This is an intermediate example of WCF as REST based solution and enabling CORS access, ...

  9. Object学习笔记

    <script type="text/javascript"> function forEach(o){ var html =""; for(var ...

  10. 黄聪:C#解析HTML DOM解析类 HtmlParser.Net 下载

    下载地址:HtmlParser.Net.rar 帮助文档:htmlparser.rar 背景: HTMLParser原本是一个在sourceforge上的一个Java开源项目,使用这个Java类库可以 ...