自定义弹出框基于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:;

    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;

}

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);

自定义弹出框基于zepto 记得引入zepto的更多相关文章

.NET MVC 学习笔记（四）— 基于Bootstarp自定义弹出框
.NET MVC 学习笔记(四)—— 基于Bootstarp自定义弹出框转载自:https://www.cnblogs.com/nele/p/5327380.html (function ($) { ...
js自定义弹出框
js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...
android自定义弹出框样式实现
前言: 做项目时,感觉Android自带的弹出框样式比较丑,很多应用都是自己做的弹出框,这里也试着自己做了一个. 废话不说先上图片: 实现机制 1.先自定义一个弹出框的样式 2.自己实现CustomD ...
react native仿微信性别选择-自定义弹出框
简述要实现微信性别选择需要使用两部分的技术: 第一.是自定义弹出框: 第二.单选框控件使用: 效果实现一.配置弹出框弹出框用的是:react-native-popup-dialog(Git地址 ...
jquery实现自定义弹出框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
bootstrap插件bootbox参数和自定义弹出框宽度设置
插件官方地址:http://bootboxjs.com/ alert: 1 bootbox.alert("Hello world!", function() {}); dialog ...
android 自定义弹出框AlertDialog ，很炫的哦
于是就小小的模仿了下自己写了这个这样的效果,主要代码如下:dlg = new AlertDialog.Builder(context).create();dlg.show();dlg.getWin ...
微信小程序组件自定义弹出框
 <view class='add-rob' bindtap="setModalStatus" data-status=&qu ...
干掉MessageBox，自定义弹出框JMessbox (WindowsPhone)
先上效果图 QQ退出效果 ...

随机推荐

《MongoDB 权威指南》学习总结
书目 http://baike.baidu.com/link?url=DVJuvrT4ssbM8V1pKcoRx5H1CwRRCynC6_Ix6YWIrr414opislflpPuY9hRDO4g ...
alloc
注意,凡是用到指针的地方,一定要在堆中分配空间,否则指针释放了,那就不能够传值了. 将一个对象作为另外一个对象的成员变量,可以直接将两个对象联系起来.
JAVA程序改错（易错题）
JAVA程序改错 1. abstract class Name { private String name; public abstract boolean isStupidName(String n ...
ios 父VIew的宽度等于较大view的宽度，并且垂直居中
白色view上面有两个子View,红色view和橙色view.白色view的宽度等于橙色view和红色view宽度较大的一个,并且橙色view和红色view垂直居中, Masonry布局如下: ...
MySQL 的 utf8_general_ci 和 utf8_unicode_ci 有什么区别，应如何选择？
一般的解说是 utf8_general_ci 速度较快,utf8_unicode_ci 准确性较好 … 但快在那里,又好在什么地方呢? 首先就其准确性说,这世界上有无数种文字,除了通用的英文使用我们较 ...
java 使用 poi 解析excel
背景: web应用经常需要上传文件,有时候需要解析出excel中的数据,如果excel的格式没有问题,那就可以直接解析数据入库. 工具选择: 目前jxl和poi可以解析excel,jxl很早就停止维护 ...
Codeigniter2.25部署Linux(php5.6)
1).默认路由:修改system/core/Router.php 中第146行.如下图所示.ps:转换成小写我也是醉了...注释的代表是codeigniter作者写的,而上面的是我更改的 2).mod ...
django for monkey(chapter one)
一.获取设备驱动 class monkey(object): def get_devices(self): self.a = os.popen('adb devices') self.devices ...
Python之路-python(面向对象一)
一.面向对象介绍二.为什么要用面向对象开发三.封装.继承.多态.类.方法面向过程和面向对象的区别编程范式: 一般情况下,拿到一个项目不同的两个人有不同的编写方式(相同的是固定的语法.数据结构) ...
k近邻算法的Java实现
k近邻算法是机器学习算法中最简单的算法之一,工作原理是:存在一个样本数据集合,即训练样本集,并且样本集中的每个数据都存在标签,即我们知道样本集中每一数据和所属分类的对应关系.输入没有标签的新数据之后, ...

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

自定义弹出框基于zepto 记得引入zepto的更多相关文章

随机推荐

热门专题