x0popup-纯js弹出对话框插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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动画，而不是直接关闭。