x0popup是一款用于替代原生警告框、消息框和确认框的纯js插件。通过该js插件可以制作出非常炫酷的警告框、消息框和确认框效果。它的特点还有：

  • 轻量级，压缩后的版本小于4kb。
  • 纯js，无外部依赖库。
  • 扁平化风格设计。
  • 允许用户自定义主题。

x0popup对话框插件效果演示

安装

可以通过npm或bower来安装该对话框插件。

npm install x0popup
bower install x0popup

使用方法

在页面中引入x0popup.min.css和x0popup.min.js文件。

<link rel="stylesheet" href="path/to/css/x0popup.min.css">
<script src="path/to/js/x0popup.min.js"></script>
初始化插件

要制作一个简单的弹出消息框，可以使用下面的代码：

x0p('Message', 'Hello world!');

要制作一个确认对话框，可以使用下面的代码：

x0p('Confirmation', 'Are you sure?', 'warning');

要制作一个消息提示框，可以使用下面的代码：

x0p('Enter Your Name', null, 'input',
function(button, text) {
    if(button == 'info') {
        x0p('Congratulations', 
            'Your name is ' + text + '!', 
            'ok', false);
    }
    if(button == 'cancel') {
        x0p('Canceled', 
            'You canceled input.',
            'error', false);
    }
});

配置参数

x0popup插件的配置参数如下：

参数 类型 默认值 描述
title string 'Message' 提示框的标题。
text string null 提示框的文本。
theme string 'default' 提示框的主题，目前只有一种主题，你可以在'css/x0popup.default.css'文件中编写自己的主题。
overlay bool true 是否显示遮罩层。
width string '90%' 提示框的宽度。
height string '50%' 提示框的高度。
maxWidth string '450px' 提示框的最大宽度。
maxHeight string '200px' 提示框的最大高度。
type string 'text' 类型：text, input, ok, warning, info, error。
icon string null 图标：ok, warning, info, error, custom。
iconURL string null 当icon类型为cusotm时，使用该参数来指定图标的url。
inputType string null 输入框类型：text, password。
inputValue string null 输入框的默认值。
inputPlaceholder string null 输入框的占位文本。
inputColor string null 输入框的文本颜色。
inputValidator function null 参数： button。返回一条提示错误的信息。cancel按钮不会触发这个函数。
showCancelButton bool null 是否显示cancel按钮。
buttons array null 按钮数组。
autoClose integer null 对话框在指定的时间之后自动关闭。
html bool false 如果设置为false，html代码在置入对话框之前将被编码。
animation bool true 是否显示动画。
animationType string 'pop' 动画类型：pop, slideUp, slideDown, fadeIn。
overlayAnimation bool true Set it to false will help if you want to show several popups with overlay continuously.
callback function null 回调函数。
按钮

按钮的可取值有：ok, warning, info, error, cancel, timeout。除了timeout会自动触发，其它的由用户来触发。

单个按钮的结构如下：

参数 类型 默认值 描述
type string null 可取值： ok, warning, info, error, cancel。
text string null 如果设置为null，按钮上的文本将被设置为默认值。
showLoading bool null 如果设置为true，在按钮被点击时，对话框会显示一个loading动画，而不是直接关闭。

x0popup对话框插件的github地址为：https://github.com/gao-sun/x0popup