自定义弹窗（dialog）

BigNerdCoding 发布于2019-08-01 17:58 / 646人阅读

摘要：构造函数的原型方法合并自定义参数移除已存在的弹窗原型中提供了和方法。方法可以接受参数，也是一个参数对象，与在构造函数中的方法一样，主要是为了方便更改弹窗功能。

简易弹窗 开发说明

项目使用原型对象的方式实现弹窗的基本功能

项目依赖jquery，如果使用zepto，可能需要改动代码，未测试，有问题请反馈，及时解决

项目提供了可定制弹窗，可以自定义按钮，标题，以及对应按钮的回调函数

样式完全可以按照自己的需求自定义，很灵活。

css样式

/*dialog*/
body.locked{overflow-y:hidden;}
.dialog-box{ width:100%;height:100%;max-width:720px;position: fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,0.3);z-index:1000;display:none;}
.dialog-box .dialog-content{width:460px;padding:30px 10px;height:auto;border-radius:10px;
    background: #ffffff;min-height:100px;position:absolute;top:50%;left:50%;
    transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);z-index:1001;}
.dialog-box .dialog-title,.dialog-box .dialog-btn{color:#666666;font-size: 30px;text-align:center;}
.dialog-box .dialog-title{padding:0 12px;}
.dialog-box .dialog-btns{text-align:center;}
.dialog-box .dialog-btn{display:inline-block;width:130px;margin:28px 44px 0;border-radius: 4px;height:56px;line-height: 56px;}
.dialog-box .dialog-cancel-btn{background: #ffffdffffd;}
.dialog-box .dialog-confirm-btn{background: #9cbf42;color:#ffffff;}
.store-switch-tip{color:#9cbf42;font-size: 30px;padding:0 6px;}
基本样式设置，可以根据自己的需求自定义样式

弹窗构造函数

Dialog = function( options ){
    var defaultOptions = {
        container : "dialog-box",
        btns : [ 
            { klass : "dialog-cancel-btn", txt:"取消"},
            { klass : "dialog-confirm-btn", txt : "确认"}
        ]
    };
    // 合并自定义参数
    this.options = $.extend({}, defaultOptions, options || {});
};
1. options : 参数对象，如果不传则系统默认，参数类型必须是对象，与定义的defaultOptions格式一致
2. $.extend() ：合并参数，不知道其用法的，请查阅相关资料。

构造函数的原型方法

Dialog.prototype = {
    $body : $("body"),
    constructor : Dialog,
    show : function( title ){
        var 
        _self = this,
        args = Array.prototype.slice.apply(arguments),
        options = _self.options;
        args.shift();
        _self.$body.addClass("locked");
        setTimeout(function(){
            $("." + options.container ).show().find(".dialog-title").html( title );
            $.each(options.btns,function( k, v ){
                $("." + v.klass ).data( "fn",args[k] || function(){} );
            });
        },30);
    },
    init : function(opt){
        var _self = this,
        options = $.extend({}, _self.options, opt || {}) , // 合并自定义参数
        btnsHTML = "",
        node = $("." + options.container ).remove(); // 移除已存在的弹窗
        node = null;
        $.each( options.btns, function( k, v ){
            btnsHTML += "" + v.txt + ""; 
        });
        $("" +
            "" +
                "" + 
                "" + btnsHTML + "" + 
            "" +
            "").appendTo("body");
        _self._event();
        return _self;
    },
    _event : function(){
        var _self = this;
        var options = _self.options;
        $("." + options.container ).on("click", ".dialog-btn", function(e){
            e.stopPropagation();
            _self.$body.removeClass("locked");
            $("." + options.container ).hide();
            $(this).data("fn")();
        });
    }
};
1.原型中提供了init和show方法。
    init方法可以接受参数，也是一个参数对象，与在构造函数中的方法一样，主要是为了方便更改弹窗功能。
    show方法主要是做显示处理，需要传标题，和相应按钮的回调函数，并将回调函数绑定在相应的按钮上，以待按钮触发事件时回调。
2.按钮回调函数的绑定是通过jquery中的 data 方法实现的，可以查阅相关的资料

组件的使用

// 实例化弹窗对象
var dialog = new Dialog();

// var dialog = new Dialog({
     // 可以配置相应的参数，也可以不配置使用默认，默认是一个确认一个取消，注意参数格式，请参照默认参数配置
// }); 
dialog.init(); // 初始化弹窗
dialog.show("我是标题",function(){
    alert("按钮1触发后的回调！")
},function(){
    console.log("按钮2的回调函数！");
}[,...]);// 注意回调函数要和按钮一一对应。

当然你也可以连着写 如：dialog.init().show();
如果需要的话，你也可以在弹窗初始话的时候传参，修改默认配置参数。在实例化后，是双按钮，然后有需要一个但按钮。
这时你无需在创建一个弹窗实例，直接调用实例的init方法，配置相应的参数即可。你可以这样使用：
dialog.init({
    btns : [ 
            { klass : "dialog-confirm-btn", txt : "知道了"}
        ]
}).show("我只有一个按钮哈",function(){alert("点击我的回调哈")});

如在使用过程中遇到任何问题，或者有更好的方案欢迎留言，谢谢！

混合云云服务器自定义dialog 安卓自定义Dialog 自定义头像自定义

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51496.html

自定义弹窗（dialog）

摘要：构造函数的原型方法合并自定义参数移除已存在的弹窗原型中提供了和方法。方法可以接受参数，也是一个参数对象，与在构造函数中的方法一样，主要是为了方便更改弹窗功能。简易弹窗开发说明项目使用原型对象的方式实现弹窗的基本功能项目依赖jquery，如果使用zepto，可能需要改动代码，未测试，有问题请反馈，及时解决项目提供了可定制弹窗，可以自定义按钮，标题，以及对应按钮的回调函数样式...

ctriptech 2019-08-21 17:28 评论0 收藏0
移动端常用alert、confirm、toast等弹窗插件，兼容 jQuery/Zepto

移动端弹窗插件第二版，包括常见的 alert、confirm、toast、notice 四种类型弹窗，支持 jQuery 和 Zepto 库。特性支持常见的 alert、confirm、toast、notice 四种类型弹窗可选择使用 IOS 或者 Material Design 风格的弹窗可自定义按钮的文字、样式、回调函数，支持多个按钮多个弹窗状态改变回调函数同时支持 jQuery...

khlbat 2019-08-21 17:36 评论0 收藏0
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素

摘要：在随后的版本中，团队一直在修改原生弹窗的表现。所以这种原生弹窗的最大用处不是用来提示用户信息，而是伤害用户。团队在中移除了对弹窗的支持。获取用户输入可以用中的元素。作为的元素，目前除了和以外，其它浏览器均未支持。自 1995 年 JavaScript 诞生之初，就包含了 3 个方法 alert()、confirm() 和 prompt()。在随后的 Chrome 版本中，Chrome...

saucxs 2019-08-05 17:54 评论0 收藏0
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素

摘要：在随后的版本中，团队一直在修改原生弹窗的表现。所以这种原生弹窗的最大用处不是用来提示用户信息，而是伤害用户。团队在中移除了对弹窗的支持。获取用户输入可以用中的元素。作为的元素，目前除了和以外，其它浏览器均未支持。自 1995 年 JavaScript 诞生之初，就包含了 3 个方法 alert()、confirm() 和 prompt()。在随后的 Chrome 版本中，Chrome...

philadelphia 2019-08-29 12:49 评论0 收藏0
一个基于Vue.js+Mongodb+Node.js的博客内容管理系统

摘要：三更新内容在原来项目的基础上，做了如下更新数据库重新设计，改成以用户分组的数据库结构应数据库改动，所有接口重新设计，并统一采用和网易立马理财一致的接口风格删除原来游客模式，增加登录注册功能，支持弹窗登录。这个项目最初其实是fork别人的项目。当初想接触下mongodb数据库，找个例子学习下，后来改着改着就面目全非了。后台和数据库重构，前端增加了登录注册功能，仅保留了博客设置页面，但是...

wh469012917 2019-08-26 11:46 评论0 收藏0