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

随机推荐

Unity3D中自带事件函数的执行顺序(转)
原文:http://www.jianshu.com/p/1d93ece664e2 在Unity3D脚本中,有几个Unity3D自带的事件函数按照预定的顺序执行作为脚本执行.其执行顺序如下: 编辑器(E ...
gogo
Qixoe019uip netstat -apn|grep 808*cd /data/pkg/super-car-store./start 端口 jar包名 //是否查询连锁店数据 if(chainC ...
【五子棋AI循序渐进】关于VCT,VCF的思考和核心代码
前面几篇发布了一些有关五子棋的基本算法,其中有一些BUG也有很多值得再次思考的问题,在框架和效果上基本达到了一个简单的AI的水平,当然,我也是初学并没有掌握太多的高级技术.对于这个程序现在还在优化当中 ...
浏览器同步测试神器 — BrowserSync
Browsersync 能让浏览器实时.快速响应文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试,当 ...
IIS不能对网站添加默认文档（由于权限不足而无法写入配置文件）
IIS7以上版本配置网站时需要手动配置网站目录的文件夹权限增加"IIS_IUSER"用户的修改权限但增加后仍然提示“ 由于权限不足无法写入配置文件” 通常是Web.config ...
C#基础知识大杂烩
这样是调用父类中第二个有参的构造函数,如果去掉Base默认调用无参构造函数注意执行顺序是:先调用父类的构造函数,然后再执行子类自己的构造函数. 父类: class Person { public P ...
tcp_tw_recycle 的问题, 使用某一个wifi，APP老是连接不上网络
ss -tan 反映出来的情况就是在服务器上抓包,发现有SYN包,但服务器就是不回ACK包,因为SYN包已经被丢弃了.为了验证这一结果,可以执行netstat -s | grep timestamp ...
MVC HtmlHelper用法(一)@Html.BeginForm的使用总结
1.@using(Html.BeginForm()){} //提交到当前页面 2.@using ...
Python实现抓取页面上链接
方法一: # coding:utf-8 import re import requests # 获取网页内容 r = requests.get('http://www.163.com') data ...
Android -- 是时候来了解一波EventBus了
1,最早在项目中使用EventBus是在去年的时候,但自己一直没抽出时间来记录记录一下,今天就来简单的使用一下,先看一下EventBus的定义是什么 EventBus:是一个发布 / 订阅的事件总线. ...

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

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

随机推荐

热门专题