自定义弹出框基于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退出效果 ...

随机推荐

Fail to start neutron-server
问题: [root@localhost ~]# systemctl status neutron-server ● neutron-server.service - OpenStack Neutron ...
git-配置公司账号
1.初始化配置 git config --global user.name " abc" git config --global user.email "abc@123. ...
20145209&20145309信息安全系统设计基础实验报告（4）
实验步骤阅读和理解源代码 demo_read,demo_write 函数完成驱动的读写接口功能,do_write 函数实现将用户写入的数据逆序排列,通过读取函数读取转换后的数据.这里只是演示接口的实 ...
symmetric multiprocessor
https://en.wikipedia.org/wiki/Symmetric_multiprocessor_system A symmetric multiprocessor system (SMP ...
JMeter学习-007-JMeter 断言实例之一 - 响应断言
之前的文章中已经对如何录制 web 的请求进行了详细的描述,敬请参阅:JMeter学习-004-WEB脚本入门实战同时,我们的手机应用(例如:京东.天猫.唯品会.携程.易迅等等 App)所发出的请 ...
白话学习MVC(五)Controller的激活
一.概述在此系列开篇的时候介绍了MVC的生命周期 , 对于请求的处理,都是将相应的类的方法注册到HttpApplication事件中,通过事件的依次执行从而完成对请求的处理.对于MVC来说,请求是先 ...
制作U盘启动盘及安装操作系统的方法
U盘启动盘制作方法: 1.从网上下载最新的老毛桃U盘启动制作工具主程序并安装 2.插入U盘(制作启动盘前先保存好你的资料到其它地方,以防丢失不可找回) 3.插入正确的U盘后程序会自动检测到U盘,启动模 ...
FIO是测试IOPS
FIO是测试IOPS的非常好的工具,用来对硬件进行压力测试和验证,支持13种不同的I/O引擎,包括:sync,mmap, libaio, posixaio, SG v3, splice, null, ...
asp.net mvc4 设置build项目时，编译view页面
新建好项目后,把system.web.mvc.dll移除,重新选择本地C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET MVC 4\Assemblies ...
Unity基于响应式编程(Reactive programming)入门
系列目录 [Unity3D基础]让物体动起来①--基于UGUI的鼠标点击移动 [Unity3D基础]让物体动起来②--UGUI鼠标点击逐帧移动时光煮雨 Unity3D让物体动起来③—UGUI DoT ...

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

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

随机推荐

热门专题