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

随机推荐

Sharepoint 2013 网站集的删除与还原
一.可以通过三种方法删除网站集: 1.打开Sharepoint 2013 管理页面首页 ---> 单击‘应用程序管理(Application Management)’并进入该页面 ---> ...
asp.net identity 2.2.0 中角色启用和基本使用（五）
建立控制器UsersAdminController 第一步:在controllers文件夹上点右键>添加>控制器, 我这里选的是“MVC5 控制器-空”,名称设置为:UsersAdminC ...
Codeigniter CRUD生成工具
Codeigniter CRUD生成工具 http://crudigniter.com/
Ubuntu每次启动都显示System program problem detected的解决办法
Ubuntu每次启动都显示System program problem detected的解决办法 sudo gedit /etc/default/apport 将enabled=1改为enabled ...
定时调度模块:sched
"""A generally useful event scheduler class. 事件调度器类 Each instance of this class manag ...
java实现文件及目录压缩
package org.alfresco.repo.bom.util; import java.io.File; import java.io.FileInputStream; import java ...
开发回归测试之Selenium开发环境搭建
前言在解bug的过程中,经常遇到解完某个bug带来新的bug,原因一般是因为回归测试不足或不全面,下面我们来看看怎么利用selenium工具来完成开发后的回归测试, 虽然这可能是QA的事,不过有利于 ...
Django 一对多，多对多关系解析
[转]Django 一对多,多对多关系解析 Django 的 ORM 有多种关系:一对一,多对一,多对多. 各自定义的方式为 : 一对一: OneToOneField ...
lua module环境探秘
module 作用 module (name [, ···]) Creates a module. If there is a table in package.loaded[name], this ...
!! 据说年薪30万的Android程序员必须知道事
http://www.th7.cn/Program/Android/201512/742423.shtml Android中国开发精英目前包括: Android开源项目第一篇——个性化控件(View ...

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

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

随机推荐

热门专题