Txbb.Pop

同学帮帮弹出层类组件,简洁、无依赖,使用 CSS3 实现动画效果。

为什么要再造一遍轮子

弹出层是常见的业务场景,而且弹出层的业务场景很简单,没必要使用大而全的库,并且,我们经常会有 层上层 这种情况,因此笔者写了两个功能,toast及modal。

包含两个业务点

toast 和 modal

API

toast

Txbb.Pop('toast', text);

modal

Txbb.Pop('modal', options);

options

  • body: 显示内容,可以是纯字符串,也可以是 dom 元素,当使用 dom 元素时,其 innerHTML 会被显示。
  • title: 显示标题
  • ok: 确认回调
  • cancel: 取消回调
  • okText: 确认按钮文字
  • cancelText: 取消按钮文字

项目主页:http://www.open-open.com/lib/view/home/1442999008732

http://www.open-open.com/lib/view/open1442999008732.html

同学帮帮移动 H5 弹出层类组件:txbb-pop的更多相关文章

  1. 移动端 H5 弹出层 fixed 内容可滚动

    <div class="alert_wapper"> <div class="wapper"> <!--内容 --> < ...

  2. zepto弹出层组件

    html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...

  3. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  4. jquery制作弹出层带遮罩效果,点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  5. Popup - 弹出层

    //图片类快捷弹出层 <a href="" target="_blank"> <div class="panlifang1" ...

  6. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  7. 利用React/anu编写一个弹出层

    本文将一步步介绍如何使用React或anu创建 一个弹出层. React时代,代码都是要经过编译的,我们很多时间都耗在babel与webpack上.因此本文也介绍如何玩webpack与babel. 我 ...

  8. JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  9. layui弹出层之应用实例讲解

    从酒店管理系统到智能门锁及其现在的资源共享平台,layui框架,我们团队用的比较多的就是这个layui弹出层. layui弹出层,除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示 ...

随机推荐

  1. .NET/MVC-ViewBag、ViewData、TempData区别

    1.ViewData ViewData的生命周期和View相同, 只对当前View有效. 2.TempData TempData保存在Session中, Controller每次执行请求的时候会从Se ...

  2. Android studio 模拟器中输入中文

    Android studio 模拟器中输入中文 学习了:https://blog.csdn.net/feidie436/article/details/78318752?locationNum=10& ...

  3. PHP上传文件类 代码练习

    类文件: <?php class upload{ protected $fileName; protected $uploadPath; protected $maxSize; protecte ...

  4. js 数组去重方法汇总

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  5. c++11 学习

    #include <iostream> // std::cout #include <functional> // std::ref #include <thread&g ...

  6. java基础讲解03-----java的结构

    前面我们说了java是面向对象的语言,java程序的基本组成单元是类,类中又属性,方法两个部分,每个应用程序都会有一个mian函数,含有main()方法的类,我们称为主类 package  Test; ...

  7. 动态规划初级 入门理解 C#代码

      using System; using System.Collections.Generic; using System.Linq; using System.Text; using Micros ...

  8. 关于new与=号创建对象的区别

    (1)先定义一个名为str的对String类的对象引用变量:String str: (2)[在[栈]中查找有没有存放值为"abc"的地址,如果没有,则开辟一个存放字面值为" ...

  9. 记一次.net core调用SOAP接口遇到的问题

    背景        最近需要将一些外部的Web Service及其他SOAP接口的调用移到一个独立的WebAPI项目中,然后供其他.Net Core项目调用.之前的几个Web Service已经成功迁 ...

  10. Linux 基础学习(第二节)

    free命令用于显示当前系统中内存的使用量信息,格式为:“free [-h]”. 为了保证Linux系统不会突然卡住宕机,因此内存使用量应该是运维人员时刻要关注的数据啦,咱们可以使用-h参数来以更人性 ...